<template>
  <view>
    <view class="return_title">
      <u-status-bar></u-status-bar>
      <view style="display: flex;align-items: center">
        <view class="title">领食团长&nbsp;</view>
        <image class="check_icon" style="height: 40rpx;width: 10rpx"
               :src="BaseImgUrl + '/once/lstz/kuohao.png'"></image>
        <view class="title" style="font-size: 34rpx">&nbsp;&nbsp;{{ city }}</view>
        <view style="flex: 1"></view>
        <!-- #ifdef APP-PLUS || H5-->
        <view class="symx" @click="handleOpenView('IncomeDetails')">
          收益明细
          <image :src="BaseImgUrl+'/group/c_r.png'"></image>
        </view>
        <!--#endif-->
      </view>
    </view>
    <view class="top_box">
      <!--#ifdef H5-->
      <view style="height:120rpx;"></view>
      <!--#endif-->
      <!-- #ifdef MP -->
      <view style="height:190rpx;"></view>
      <view class="sy_detail" :style="'top:0rpx;'" @click="handleOpenView('IncomeDetails')">收益明细
        <image :src="BaseImgUrl+'/group/c_r.png'"></image>
      </view>
      <!--#endif-->
      <!-- #ifdef APP-PLUS -->
      <view style="height:190rpx;"></view>
      <!--#endif-->
      <view class="sy_box">
        <view v-for="(item, index) in syData" :key="index" class="one_box">
          <view class="num">{{ item.num }}</view>
          <view class="text">{{ item.text }}</view>
        </view>
      </view>
      <view class="group_user">
        <view class="left_img">
          <image :src="userAvatar?userAvatar:'https://lsz.lszbg.com/imgs/group/head_img.png'" alt=""></image>
        </view>
        <view class="r_user">
          <view class="username">
            <text class="name">{{ user ? user?.nickname : '无' }}</text>
            <text class="bq" @click="xb_show=true">省钱小报</text>
          </view>
          <view class="user_desc">直接拉团人越多，获得的奖励越多哦！</view>
        </view>
      </view>
    </view>

    <view class="middle_box">
      <!--消息提示-->
      <view class="notice_box" @click="handleOpenMembers()">
        领食
        <text>提醒</text>
        ： {{ rulesData?.rules || '无' }}
      </view>
      <!-- 正在参与的挑战任务列表 -->
      <!--<view v-if="isCheckChallenge" class="task_box">
        <view>
          &lt;!&ndash; 任务背景图片 &ndash;&gt;
          &lt;!&ndash;<image :src="BaseImgUrl+'/challenge/start_task.png'" class="task_img"></image>&ndash;&gt;
          <view class="task_img">
            <cache-image :img-src="BaseImgUrl+'/challenge/start_task.png'"
                         :isimg="true" imgMode="widthFix"
                         :image-style="{width: '100%', height: '250rpx', borderRadius: '20rpx'}"></cache-image>
          </view>

          &lt;!&ndash; 任务标题 &ndash;&gt;
          <view class="task_title" >签到活动</view>
          &lt;!&ndash; 任务列表 &ndash;&gt;
          <view class="task_item_content" style="position: relative;z-index: 11;">
            <view v-if="!isUserJoinChallenge" class="task_item_list">
              <view  v-if="isCheckChallenge" style="margin-bottom: 20rpx;">
                &lt;!&ndash; 截止时间和参与人数 &ndash;&gt;
                <view style="display: flex;align-items: center;justify-content: space-between;">
                  <text class="bm_end_time" style="">报名截止时间：{{ challengeList.end_time }}</text>
                  <view style="display: flex;">
                    &lt;!&ndash;<image class="fire" :src="BaseImgUrl + '/once/lstz/fire.png'"></image>&ndash;&gt;
                    <cache-image :img-src="BaseImgUrl + '/once/lstz/fire.png'" :isimg="true" imgMode="widthFix"
                                 :image-style="{width: '32rpx', height: '32rpx'}"></cache-image>
                    <text class="join_count">{{ challengeList.join_count }}人已参与</text>
                  </view>
                </view>
                &lt;!&ndash; 奖励金额和任务描述 &ndash;&gt;
                <view class="money_bg_content">
                  <view style="position: relative">
                    &lt;!&ndash;<image class="money_bg" :src="BaseImgUrl + '/once/lstz/red_envelope_bag.png'"></image>&ndash;&gt;
                    <view class="money_bg">
                      <cache-image :img-src="BaseImgUrl + '/once/lstz/red_envelope_bag.png'" :isimg="true" imgMode="widthFix"
                                   :image-style="{width: '140rpx', height: '176rpx'}"></cache-image>
                    </view>
                    <view class="money_text">
                      <text>{{ challengeList.money }}</text>
                      <text style="font-size: 32rpx">元</text>
                    </view>
                  </view>
                  <view style="width: 20rpx"></view>
                  <view style="margin-top: 20rpx;flex: 1;">
                    <view style="font-weight: bold;font-size: 32rpx;color: #333333;line-height: 24rpx;">{{ challengeList.title }}</view>
                    <view style="font-size: 28rpx;color: #888888;margin-top: 20rpx">{{ challengeList.descript }}</view>
                    <view class="go_buy" @click="fire_join(challengeList)">免费报名</view>
                  </view>
                </view>
              </view>
              &lt;!&ndash;没有签到活动提示&ndash;&gt;
              <view  v-if="!isCheckChallenge" class="null_box" style="height: 160rpx;line-height: 160rpx;">
                您所在的区域暂无签到活动~
              </view>
            </view>
            <view v-if="isUserJoinChallenge" class="task_item_list">
              <view style="margin-bottom: 20rpx;">
                &lt;!&ndash; 截止时间和参与人数 &ndash;&gt;
                <view style="display: flex;align-items: center;justify-content: space-between;">
                  <text class="bm_end_time" style="">报名截止时间：{{ userJoinChallenge.end_time }}</text>
                  <view style="display: flex;">
                    &lt;!&ndash;<image class="fire" :src="BaseImgUrl + '/once/lstz/fire.png'"></image>&ndash;&gt;
                    <cache-image :img-src="BaseImgUrl + '/once/lstz/fire.png'" :isimg="true" imgMode="widthFix"
                                 :image-style="{width: '32rpx', height: '32rpx'}"></cache-image>
                    <text class="join_count">{{ userJoinChallenge.join_count }}人已参与</text>
                  </view>
                </view>
                &lt;!&ndash; 奖励金额和任务描述 &ndash;&gt;
                <view class="money_bg_content">
                  <view style="position: relative">
                    &lt;!&ndash;<image class="money_bg" :src="BaseImgUrl + '/once/lstz/red_envelope_bag.png'"></image>&ndash;&gt;
                    <view class="money_bg">
                      <cache-image :img-src="BaseImgUrl + '/once/lstz/red_envelope_bag.png'" :isimg="true" imgMode="widthFix"
                                   :image-style="{width: '140rpx', height: '176rpx'}"></cache-image>
                    </view>
                    <view class="money_text">
                      <text>{{ userJoinChallenge.money }}</text>
                      <text style="font-size: 32rpx">元</text>
                    </view>
                  </view>
                  <view style="width: 20rpx"></view>
                  <view style="margin-top: 20rpx;flex: 1;">
                    <view style="font-weight: bold;font-size: 32rpx;color: #333333;line-height: 24rpx;">{{ userJoinChallenge.title }}</view>
                    <view style="font-size: 28rpx;color: #888888;margin-top: 20rpx">{{ userJoinChallenge.descript }}</view>
                  </view>
                </view>
              </view>
              &lt;!&ndash; 分割线 &ndash;&gt;
              <u-line v-if="userJoinChallenge" color="#F2F2F2" style="margin-bottom: 20rpx;"></u-line>
              &lt;!&ndash; 任务状态和进度 &ndash;&gt;
              <view style="display: flex;align-items: center;margin-top: 20rpx">
                <view style="display:flex;flex-direction: column;align-items: flex-start;flex: 1">
                  &lt;!&ndash; 不同状态的提示信息 &ndash;&gt;
                  <view v-if="userJoinChallenge.status === 1 && userJoinChallenge.time <= 0" class="cancel_tip">正在等待订单审核</view>
                  <view v-else-if="userJoinChallenge.status === 2 && (userJoinChallenge.is_cancel === 0 || userJoinChallenge.is_cancel === null || userJoinChallenge.is_cancel === 'null' )" class="cancel_tip">规定时间内未完成挑战</view>
                  <view v-else-if="userJoinChallenge.status === 2 && userJoinChallenge.is_cancel === 1" class="cancel_tip">任务规定时间内主动取消挑战</view>
                  <view v-else-if="userJoinChallenge.status === 3" class="cancel_tip">挑战任务完成-待领奖</view>
                  <view v-else-if="userJoinChallenge.status === 4" class="cancel_tip">挑战任务完成-已领奖</view>
                  <lszbg-count-down v-else before-text="剩余时间" :is-hms="false" :is-color="true" :timeColor="timeColor" :time="userJoinChallenge.time * 1000"></lszbg-count-down>
                  &lt;!&ndash; 进度条 &ndash;&gt;
                   <view class="bl_box">
                     <text class="val_num" style="color: #3D3D3D">进度&nbsp</text>
                     <text class="val_num">{{ userJoinChallenge.nums }}</text>
                     <text class="val_num" style="color: #3D3D3D">/{{ userJoinChallenge.type === 1 ? userJoinChallenge.order_num : userJoinChallenge.invite_num }}</text>
                     <view style="width: 168rpx;margin-left: 16rpx;border-radius: 20rpx;overflow: hidden">
                       <progress :percent="(userJoinChallenge.nums/(userJoinChallenge.type === 1 ? userJoinChallenge.order_num : userJoinChallenge.invite_num)*100)" border-radius="100" duration="16" stroke-width="11" activeColor="#FF8548" backgroundColor="#FFDECE" active="true"/>
                     </view>
                   </view>
                </view>

                &lt;!&ndash; 不同状态下的按钮 &ndash;&gt;
                <view v-if="userJoinChallenge.status === 1" class="fq_tz" @click="giveUpChallenge">放弃挑战</view>
                <view style="margin-left: 20rpx"></view>
                <view v-if="userJoinChallenge.status === 1 && userJoinChallenge.type === 1" @click="goBuyFun" class="go_buy">去下单</view>
                &lt;!&ndash;<view v-if="userJoinChallenge.status === 1 && userJoinChallenge.type === 1" :class="userJoinChallenge.reseller_id === city.reseller_id ? 'go_buy':'go_buy1'" @click="userJoinChallenge.reseller_id === city.reseller_id?toHome():showTip('当前城市不能继续该任务')">{{ userJoinChallenge.reseller_id === city.reseller_id ? '去下单' : '仅限' + userJoinChallenge.city_name }}</view>&ndash;&gt;
                &lt;!&ndash;<view v-if="userJoinChallenge.status === 1 && userJoinChallenge.type === 2" :class="userJoinChallenge.reseller_id === city.reseller_id ? 'go_buy':'go_buy1'" @click="userJoinChallenge.reseller_id === city.reseller_id?toMakeMoney(false,'/pages/makemoney/getmaker'):showTip('当前城市不能继续该任务')">{{ userJoinChallenge.reseller_id === city.reseller_id ? '去邀请' : '仅限' + userJoinChallenge.city_name }}</view>&ndash;&gt;
                <view v-if="userJoinChallenge.status === 2" class="go_buy" @click="back">重新报名</view>
                <view v-if="userJoinChallenge.status === 3" class="go_buy" @click="getGift">领奖励</view>
                &lt;!&ndash;<view v-if="userJoinChallenge.status === 4" class="go_buy" @click="back">挑战其他任务</view>&ndash;&gt;

              </view>
            </view>
          </view>
        </view>
      </view>-->
      <!--下单奖励-->
      <!--<view class="day_discount">
        <view class="day_discount_top">
          <view class="day_discount_top_title" style="width: 140rpx;font-size: 32rpx;">下单奖励</view>

          <view style="width: calc(100% - 280rpx);font-size: 24rpx;">邀请一名好友至多可得<text style="color: #FC4106;font-weight: bold;">23元</text>，邀请越多奖励越多</view>
          <view style="flex: 1"></view>
          <view @click="makeMoneyRuleFun" style="width: 120rpx;font-size: 24rpx;color: #fc4106;text-align: right;">详细规则></view>
        </view>
        <view class="day_discount_content">
          &lt;!&ndash;下单奖励&ndash;&gt;
          <view v-for="(item, index) in orderReward" :key="index" class="day_discount_item">
            <view class="day_discount_item_money">￥{{item.price}}元</view>
            <view class="day_discount_item_text">{{item.tab_title}}</view>
            <view class="day_discount_item_text">{{item.content}}</view>
          </view>
          &lt;!&ndash;邀请奖励&ndash;&gt;
          <view  v-if="isJoinActive" v-for="(item, index) in ActivityListData.reward_steps" :key="index" class="day_discount_item">
            <view class="day_discount_item_money">￥{{item.reward}}元</view>
            <view class="day_discount_item_text">奖励</view>
            <view class="day_discount_item_text" style="font-size: 22rpx;">邀请{{item.condition}}名好友下单</view>
          </view>
        </view>
        &lt;!&ndash;没有大活动提示&ndash;&gt;
        <view v-if="!isJoinActive" class="null_box" style="margin-top:0">
          您所在的区域暂无活动~
        </view>
        <view style="display: flex;justify-content: space-between;margin-top: 20rpx;">
          <view @click="isShowErweima = true" class="addErweima">添加团长群</view>
          <view class="day_discount_btn" @click="handleOpenMembers()">点击邀请好友
            <text class="day_discount_btn_text">拉团员</text>
          </view>
        </view>

        <view style="font-size: 24rpx;color: #fc4106;padding: 20rpx 10rpx;">最终奖励为：下单奖励+邀请奖励，至多可得249元</view>

      </view>-->
      <!--挑战赛奖励 v-if="rulesData?.is_challenge"-->
      <view v-if="isCheckChallenge" class="day_discount" @click="toChallenge">
        <view class="day_discount_top">
          <view class="day_discount_top_title">活动奖励加邀请奖励至多
            <text style="color: #FC4106">可获得{{ rulesData?.total || 0 }}元</text>
          </view>
          <view style="flex: 1"></view>
          <view class="day_discount_top_sub_title">
            <image :src="BaseImgUrl + '/once/lstz/more.png'"></image>
          </view>
        </view>
        <view style="position: relative;height: 228rpx;margin-top: 20rpx">
          <view style="height: 228rpx;width: 100%;border-radius: 0;position: absolute">
            <cache-image :img-src="BaseImgUrl + '/once/lstz/make_join.png'"
                         height="228rpx" width="100%"/>
          </view>
          <view style="display: flex;justify-content: space-between">
            <view class="money_tz" style="display: flex;align-items: center;flex-direction: column">
              <view>
                <text style="font-size: 36rpx">￥</text>
                <text>{{ rulesData?.challenge || 0 }}</text>
              </view>
              <view style="height: 48rpx"></view>
              <cache-image img-src="https://lsz.lszbg.com/imgs/once/lstz/免费报名.gif"
                           height="68rpx" width="158rpx"/>
            </view>
            <view class="money_tz money_tz1">
              <text style="font-size: 36rpx">￥</text>
              <text>{{ rulesData?.invite || 0 }}</text>
            </view>
            <view class="money_tz money_tz1">
              <text style="font-size: 36rpx">￥</text>
              <text>{{ rulesData?.total || 0 }}</text>
            </view>
          </view>
        </view>
      </view>
      <!--团长奖励-->
      <view class="group_jl">
        <view class="tz_jl">
          <text class="name">团长奖励</text>
          <text class="desc_text">名下团员下单</text>
          <view style="flex: 1"></view>
          <view @click="lsgz" style="display: flex;align-items: center">
            <image style="width: 32rpx;height: 32rpx;margin-right: 10rpx"
                   :src="BaseImgUrl + '/guanfan/home/yiwen.png'" mode="widthFix"/>
            <text>规则说明</text>
          </view>
        </view>
        <view class="jl_box">
          <view class="small_jl">
            <view class="money">
              <text class="num">{{ rulesData?.config?.first || '0' }}</text>
              元
            </view>
            <view class="jl_text">首单奖励</view>
            <view class="desc_text">必定获得</view>
          </view>
          <view class="small_jl">
            <view class="money">
              <text class="num">{{ rulesData?.config?.second || '0' }}</text>
              元
            </view>
            <view class="jl_text">第二单奖励</view>
            <view class="desc_text">必定获得</view>
          </view>
          <view class="small_jl">
            <view class="money">
              <text class="num">{{ rulesData?.random_max || '0' }}</text>
              元
            </view>
            <view class="jl_text">三单以后奖励</view>
            <view class="desc_text">随机不超过</view>
          </view>
        </view>
        <view class="vip_btn" @click="handleOpenMembers()">点击获取会员
          <text class="ty_text">拉团员</text>
        </view>
      </view>


      <view class="tabs_hot">
        <view :class="group_hot_index === 0 ?'cur':''" class="text_name" @click="group_hot_index = 0">我的团员</view>
        <view :class="group_hot_index === 1 ?'cur':''" class="text_name hot_text" @click="group_hot_index = 1">排行榜</view>
        <!--<view :class="group_hot_index === 2 ?'cur':''" class="text_name" @click="group_hot_index = 2">邀请奖励</view>-->
      </view>
      <!--我的团员-->
      <view v-if="group_hot_index === 0" class="group_list">
        <view class="g_name">
          <view class="l_text">
            有效团员共
            <text>{{ rulesData?.valid_num || 0 }}</text>
            位
          </view>
          <view class="r_text" @click="handleOpenView2('myMember')">查看全部</view>
        </view>
        <view v-for="(item, index) in memberLists" v-if="memberLists.length > 0" :key="index" class="small_group">
          <view class="l_user">
            <view class="l_img">
              <image :src="item?.avatar"></image>
            </view>
            <view class="l_infor">
              <view style="display: flex;align-items: center">
                <view class="name">{{ item?.nickname }}</view>
                <view v-if="item?.binding_new === 0" style="margin-left: 15rpx;border:  #ff7400 1px solid;border-radius: 7rpx;padding: 1rpx 10rpx;font-size: 22rpx;color: #ff7400"> 老 </view>
              </view>
              <view class="fisih_text">已完成{{ item.order_num ? item.order_num : 0 }}单</view>
              <view style="font-size: 24rpx;color:#888888;">{{ item.create_time }}</view>
            </view>
          </view>
          <view class="r_price">
            <view class="price">￥{{ (item?.amount || '0.00') }}</view>
            <view class="p_text">创收总额(元)</view>
          </view>
        </view>
        <view v-if="memberLists.length === 0" class="null_box">
          <u-empty mode="data"
                   icon="https://lsz.lszbg.com/imgs/images/uView/u-data.jpg"

          >
          </u-empty>
        </view>
      </view>
      <!--排行榜-->
      <view v-if="group_hot_index === 1" class="group_list">
        <view class="hot_tabs">
          <text v-for="(item, index) in hotRank" :key="index" :class="hot_rank===index?'cur':''"
                @click="handleHotRank(index)">{{ item }}
          </text>
        </view>
        <view v-for="(item, index) in rankData" :key="index" class="small_hot">
          <view class="left_hot">
            <view v-if="index === 0" class="mc_icon">
              <image :src="BaseImgUrl + '/group/medal01.png'"></image>
            </view>
            <view v-if="index === 1" class="mc_icon">
              <image :src="BaseImgUrl + '/group/medal02.png'"></image>
            </view>
            <view v-if="index === 2" class="mc_icon">
              <image :src="BaseImgUrl + '/group/medal03.png'"></image>
            </view>
            <view v-if="index > 2" class="mc_icon">{{ index + 1 }}</view>
            <view class="head_img">
              <image :src="item?.avatar" alt=""></image>
            </view>
            <view class="nickname">{{ item.nickname }}</view>
          </view>
          <view :class="index < 3?'cur':''" class="r_price">￥{{ (item.amount) }}</view>
        </view>
        <view v-if="rankData.length !== 0" class="more_rank" @click="handleOpenView1('rankingList')">更多排行榜
          <image :src="BaseImgUrl + '/group/c_big.png'"></image>
        </view>
        <view v-if="rankData.length === 0" class="null_box" style="">
          <u-empty
              icon="http://cdn.uviewui.com/uview/empty/data.png"
              mode="data"
          >
          </u-empty>
        </view>
      </view>
      <!--邀请奖励-->
      <!--<view v-if="group_hot_index === 2" class="group_list">
        <view class="g_name" style="margin-bottom: 30rpx;">
          <view class="l_text">
            已完成的邀请奖励
          </view>
        </view>
        <view v-for="(item, index) in inviteList" v-if="inviteList.length !== 0" :key="index">
          <view class="small_group">
            <view class="l_user">
              <view class="l_infor" style="width: 100%">
                <view style="display: flex;align-items: center">
                  <view class="name">邀请<text style="color: #fc4106;padding: 0 6rpx;">{{item.condition}}</text>名好友下单</view>
                </view>
              </view>
            </view>
            <view style="font-size: 24rpx;">获得奖励</view>
            <view class="r_price">
              <view class="price">￥{{ item.reward }}.00(元)</view>
            </view>
          </view>
          <view style="margin: 10rpx 0;"><u-line color="#eee"></u-line></view>
        </view>

        <view v-if="inviteList.length === 0" class="null_box">
          没有更多的奖励~
        </view>
      </view>-->
    </view>
    <!-- 省钱小报 -->
    <!--    <image v-if="picture" :src="picture" mode="widthFix" style="width: 650rpx;height: 1112rpx;border-radius: 10rpx" show-menu-by-longpress></image>-->
    <up-popup :show="xb_show" mode="center" :round="10" @close="xb_show = false" :safe-area-inset-bottom="false">
      <image v-if="picture" :src="picture" mode="widthFix" style="width: 650rpx;height: 1112rpx;border-radius: 10rpx" show-menu-by-longpress></image>
      <l-painter v-else css="width: 650rpx;height: 1112rpx;"
                 @fail="fail"
                 @done="done"
                 pathType="url"
                 ref="poster"
                 performance>
        <l-painter-image src="https://lsz.lszbg.com/imgs/group/xb_bg.png"
                         css="width: 650rpx;height: 1112rpx; object-fit: cover; background: #f5f5f5;position: absolute;z-index: -1;border-radius: 10;top:0;right:0;left:0"/>
        <l-painter-view
            css="width: 430rpx;margin-top: 32rpx; margin-left: 110rpx;display: flex;align-items: center;justify-content: center">
          <l-painter-image
              :src="reportData?.header || 'https://lsz.lszbg.com/imgs/group/head_img.png'"
              css="width: 58rpx;height: 58rpx;border: 2rpx solid #ffffff; box-sizing: border-box; border-radius: 50%;display: inline-block"/>
          <l-painter-text :text="(reportData?.nickname || '')"
                          css="display: inline-block; color: #ffffff; font-size: 28rpx; fontWeight: bold;margin-left: 10rpx;margin-top: 6rpx;"/>
        </l-painter-view>
        <l-painter-view css="margin-top: 216rpx;margin-left: 90rpx">
          <l-painter-text text="小领已经帮我省了"
                          css="display: block; color: #000000; font-size: 28rpx;"/>
          <l-painter-text :text="'￥'+(reportData?.money || '0')"
                          css="display: block; color: #FC5722; font-size: 38rpx;margin-top: 30rpx;fontWeight: bold;"/>
          <l-painter-text text="解锁小霸王称号"
                          css="display: block; color: #FC5722; font-size: 33rpx;margin-top: 30rpx;fontWeight: bold;"/>
          <l-painter-view css="margin-top: 30rpx;">
            <l-painter-text text="预计全年可省 "
                            css="display: inline-block; color: #000000; font-size: 28rpx;"/>
            <l-painter-text :text="'￥' + (reportData?.year_money || '0')"
                            css="display: inline-block; color: #FC5722; font-size: 28rpx;fontWeight: bold;"/>
          </l-painter-view>
          <l-painter-view css="margin-top: 80rpx;">
            <l-painter-text text="加入领食"
                            css="display: inline-block; color: #000000; font-size: 30rpx;width:350rpx"/>
            <l-painter-text :text="(reportData?.days || '0')+' 天'"
                            css="display: inline-block; color: #FC5722; font-size: 30rpx;fontWeight: bold;"/>
          </l-painter-view>
          <l-painter-view css="margin-top: 50rpx;">
            <l-painter-text text="已抢霸王餐"
                            css="display: inline-block; color: #000000; font-size: 30rpx;width:350rpx"/>
            <l-painter-text :text="(reportData?.num || '0')+' 笔'"
                            css="display: inline-block; color: #FC5722; font-size: 30rpx;fontWeight: bold;"/>
          </l-painter-view>
        </l-painter-view>

        <l-painter-view css="width: 650rpx;margin-top: 90rpx;text-align:center;">
          <l-painter-text text="来   领   食   ·   就   吃   霸   王   餐"
                          css="display: inline-block; color: #FFE5D2; font-size: 32rpx;font-weight: bold;"/>
        </l-painter-view>
        <l-painter-text text="扫码"
                        css="display: block; color: #000000; font-size: 32rpx;font-weight: bold;margin-top: 70rpx;margin-left:50rpx;"/>
        <l-painter-text text="加入领食，边吃边赚"
                        css="display: block; color: #000000; font-size: 28rpx;font-weight: bold;margin-top: 20rpx;margin-left:50rpx;"/>
        <l-painter-view css="text-align:center;position: absolute;background:#FFFFFF;border-radius: 50%;bottom:20rpx;right:38rpx;
            border: 6rpx solid #ffffff; box-sizing: border-box;width: 150rpx;height: 150rpx; ">
          <l-painter-image
              :src="reportData?.user_qr_code ? reportData?.user_qr_code: 'https://lsz.lszbg.com/imgs/group/head_img.png'"
              css="width: 138rpx;height: 138rpx;border-radius: 50%;margin:auto"/>
        </l-painter-view>
      </l-painter>
      <image class="close_img" :src="BaseImgUrl + '/images/notic_close.png'" @click="xb_show = false"></image>
      <!-- #ifdef MP -->
      <view style="display: flex;justify-content: space-between">
        <button @click="xb_show = false" class="up-button" :customStyle="{borderRadius: '20rpx'}">
          <view style="color: #898989;font-weight: bold;font-size: 26rpx">关闭</view>
        </button>
        <button @click="save" class="up-button" :customStyle="{borderRadius: '20rpx'}">
          <view style="color: #ff5c26;font-weight: bold;font-size: 26rpx">保 存 海 报</view>
        </button>
      </view>
      <!-- #endif -->
      <!-- #ifdef APP-PLUS-->
      <up-button @click="getPermission" class="up-button" :customStyle="{borderRadius: '20rpx'}">
        <view style="color: #ff5c26;font-weight: bold;font-size: 26rpx">保 存 海 报</view>
      </up-button>
      <!-- #endif -->
    </up-popup>
    <!-- 省钱小报 -->
    <view class="xb_shadow" v-if="false" @click="xb_show=false"></view>
    <!--详细规则-->
    <up-popup
        :show="rules_show"
        :round="10"
        mode="bottom"
        duration="500"
        :closeable="true"
        :overlay="true"
        @close="rules_close"
        :closeOnClickOverlay="true"
        :zoom="true"
        :safeAreaInsetBottom="false"
        style="height: 100%"
    >
      <view class="rules_content">
        <view class="rules_title">
          <view class="title_text">详细规则</view>
        </view>
        <u-line style="color: #999999"></u-line>
        <view class="rules_content_box">{{ prizeText }}</view>
      </view>
    </up-popup>

    <!--<view class="notice" @click="xb_show = false">
      <view class="notice_box">
        <image class="bg_img" :src="BaseImgUrl + '/group/xb_bg.png'" mode="aspectFill"></image>
        <image class="close_img" :src="BaseImgUrl + '/images/notic_close.png'" @click="xb_show = false"></image>
        <view class="notice_content">
          <view class="xb_content">
            <view class="my_user">
              <image
                  :src="reportData?.header || 'https://lsz.lszbg.com/imgs/group/head_img.png' "></image>
              <view class="user_name">{{ reportData?.nickname || '' }}</view>
            </view>
            <view class="s_text">小领已经帮我省了</view>
            <view class="s_price">
              <text>￥</text>
              {{ reportData?.money || '0' }}
            </view>
            <view class="bw_text">解锁小霸王称号</view>
            <view class="yj_text">预计全年可省
              <text>￥{{ reportData?.year_money || '0' }}</text>

            </view>

            <view class="us_day">
              <text class="text">加入领食</text>
              <text class="day">{{ reportData?.days || '0' }}天</text>
            </view>
            <view class="us_day">
              <text class="text">已抢霸王餐</text>
              <text class="day">{{ reportData?.num || '0' }}笔</text>
            </view>
            <view class="eat_text">来领食·就吃霸王餐</view>
            <view class="code_img">
              <view class="l_sm">
                <view class="sm_text">扫码</view>
                <view class="desc_text">加入领食，边吃边赚</view>
              </view>
              <view class="r_img">
                <image
                    :src=" reportData?.user_qr_code ? reportData?.user_qr_code: 'https://lsz.lszbg.com/imgs/group/head_img.png'"></image>
              </view>
            </view>
          </view>
        </view>
      </view>
    </view>-->
    <!-- 报名弹框 -->
    <u-popup
        :show="showJoin"
        :round="10"
        mode="bottom"
        @close="showJoin = false"
        closeable
    >
      <view class="pop-root">
        <!-- 任务奖励金额 -->
        <view class="money_bg_content" style="margin: 28rpx 28rpx 20rpx; height: 176rpx;">
          <view style="position: relative">
            <image class="money_bg"
                   :src="BaseImgUrl + '/once/lstz/red_envelope_bag.png'"></image>
            <view class="money_text">
              <text>{{ currentJoinItem.money || 0 }}</text>
              <text style="font-size: 32rpx">元</text>
            </view>
          </view>
          <!-- 任务详情 -->
          <view style="width: 20rpx"></view>
          <view style="margin-top: 10rpx">
            <!-- 任务标题 -->
            <view style="font-size: 30rpx;color: #3D3D3D;font-weight: bold;margin-top: 20rpx">
              {{ currentJoinItem.title || '' }}
            </view>
            <!-- 任务描述 -->
            <view style="font-size: 24rpx;color: #888888;margin-top: 20rpx">
              {{ currentJoinItem.descript || '' }}
            </view>
          </view>
        </view>
        <!-- 分隔线 -->
        <view class="box-title-line"></view>
        <!-- 报名须知 -->
        <view class="join_content">
          <view class="bgTitle-box">
            <scroll-view scroll-y="true" style="height: 680rpx;">
              <!-- 活动开始时间 -->
              <view style="margin-top: 20rpx"></view>
              <view class="join_title">
                报名须知
              </view>
              <view class="activity_item">
                <text class="activity_time_title">活动开始时间
                </text>
                <text class="activity_time"> {{ currentJoinItem.start_time || '无' }}</text>
              </view>
              <!-- 报名截止时间 -->
              <view class="activity_item">
                <text class="activity_time_title">报名截止时间
                </text>
                <text class="activity_time"> {{ currentJoinItem.end_time || '无' }}</text>
              </view>
              <!-- 任务完成时长 -->
              <view class="activity_item">
                <text class="activity_time_title">任务完成时长
                </text>
                <text class="activity_time">{{ currentJoinItem.date || '无' }}天</text>
              </view>
              <!-- 挑战奖励 -->
              <view class="activity_item">
                <text class="activity_time_title">挑战奖励
                </text>
                <text class="activity_time">{{ currentJoinItem.money || '0' }}元</text>
              </view>
              <!-- 分隔线 -->
              <view class="box-title-line"></view>
              <!-- 挑战要求 -->
              <view class="join_title" style="margin-top: 20rpx">
                挑战要求
              </view>
              <!-- 指定城市可参与 -->
              <view class="activity_item">
                <text class="activity_time_title">指定城市可参与
                </text>
                <text class="activity_time">{{ currentJoinItem.city || '无限制' }}</text>
              </view>
              <!-- 指定下单时段 -->
              <view class="activity_item">
                <text class="activity_time_title">指定下单时段
                </text>
                <text class="activity_time">{{ currentJoinItem.task_time || '无限制' }}</text>
              </view>
              <!-- 分隔线 -->
              <view class="box-title-line"></view>
              <!-- 注意事项 -->
              <view class="join_title" style="margin-top: 20rpx;margin-bottom: 20rpx;color: #F9692A;font-weight: normal">
                注意事项：
              </view>
              <!-- 解析注意事项内容 -->
              <u-parse :content="currentJoinItem.notice"></u-parse>
              <!-- 保留底部空间 -->
              <view style="height: 60rpx">
              </view>
            </scroll-view>

          </view>
        </view>
        <!-- 底部内容 -->
        <view class="bottom_content">
          <!-- 协议复选框 -->
          <view class="protocol">
            <view class="dianji" @tap="check_icon()">
              <image v-if="check_on === 0" class="check_icon"
                     :src="BaseImgUrl + '/images/icon_check_gray.png'"></image>
              <image v-else class="check_icon" :src="BaseImgUrl + '/images/icon_check_on.png'"></image>
            </view>
            <!-- 协议文本 -->
            <view style="color: #1f2f34;font-size: 22rpx">
              我已阅读并同意《
              <text @click.stop="lsgz" style="color: #00b1ff">领食周边购挑战赛规则</text>
              》
            </view>
          </view>
          <!-- 立即报名按钮 -->
          <view class="immediately" @click="immediately">
            立即报名
          </view>
        </view>
      </view>
    </u-popup>
    <!-- 放弃挑战弹窗 -->
    <u-popup :show="isGiveUp" mode="center" :round="10" @close="close('GiveUp')" closeable :safe-area-inset-bottom="false">
      <view class="box-content">
        <!-- 弹窗标题 -->
        <view class="title">温馨提示</view>
        <view style="height: 1px;width:100%;background-color: #f4f0f0"></view>
        <!-- 弹窗内容 -->
        <view style="flex: 1;display: flex;flex-direction: column;align-items: center;justify-content: center">
          <view class="warning">
            <image :src="BaseImgUrl + '/once/lstz/warning.png'"></image>
            <text style="margin-top: 30rpx">&nbsp;&nbsp;确定放弃挑战吗？</text>
          </view>
          <view class="content">
            <text>放弃挑战后，此次挑战中已达成的挑战记录将全部归0，请谨慎处理。</text>
          </view>
        </view>
        <view style="height: 1px;background-color: #f4f0f0;margin: 0 30rpx"></view>
        <!-- 弹窗底部按钮 -->
        <view style="display: flex;margin: 30rpx">
          <view style="flex: 1"></view>
          <view class="fq_tz" @click="giveUpTask">确认放弃</view>
          <view style="margin-left: 20rpx"></view>
          <view class="go_buy" @click="isGiveUp = false">我在想想</view>
        </view>
      </view>
    </u-popup>
    <!--点击添加团长群二维码-->
    <!--<u-popup :show="isShowErweima" mode="center" :round="10" @close="close('Erweima')" closeable :safe-area-inset-bottom="false" customStyle="width:90%;">
      <view class="shops-info">
        <view class="shops-title" style="text-align: center;">
          <image :src="BaseImgUrl + '/home/qunicon.png'"></image>
          <view class="true_title">领食周边购贵阳团长群</view>
        </view>
        <view class="erweima">
          <image :src="BaseImgUrl + '/home/qunImg01.png'" mode="widthFix" show-menu-by-longpress></image>
          <view>长按保存二维码图片</view>
        </view>
      </view>
    </u-popup>-->

    <!--微信朋友圈分享-->
    <view class="share_box_shadow" v-if="orderShareShow" @click="closeOrderShareShow">
      <image mode="widthFix" :src="BaseImgUrl + '/images/share_line.png'"></image>
    </view>

    <!--邀请好友弹窗-->
    <u-popup :show="isShowGetMaker" mode="bottom" :round="30"  :safe-area-inset-bottom="false" bgColor="transparent" :customStyle="getMakerStyle" >
      <view class="getmaker_box" :style="{height: getMakerStyle.height}">
        <!--#ifdef MP || APP-PLUS-->
        <view style="height: 20%;"></view>
        <!--#endif-->
        <!--#ifdef H5-->
        <view style="height: 20%;"></view>
        <!--#endif-->
        <view class="getmaker_content" style="height: 80%">
          <!--关闭按钮-->
          <view class="getmaker_close" @click="close('GetMaker')"><u-icon name="close" size="20" color="#333333"></u-icon></view>
          <scroll-view scroll-y="true" :scroll-with-animation="true">
            <view class="getmaker_title">
              <view class="title_img">
                <image :src="BaseImgUrl + '/makemoney/getmaker_img01.png'" mode="widthFix" style="width: 100%"></image>
              </view>
              <view class="title">
                <image :src="BaseImgUrl + '/makemoney/getmaker_img02.png'" mode="widthFix" style="width: 100%"></image>
                <view class="title_text">好友下单，你得佣金，邀请得越多，赚得越多</view>
              </view>
            </view>
            <view class="getmaker_steps">
              <view class="steps_item">
                <view class="steps_item_title">
                  <image :src="BaseImgUrl + '/makemoney/getmaker_num01.png'" mode="widthFix" style="width: 28rpx"></image>
                  <text style="margin-left: 10rpx;">分享海报</text>
                </view>
                <view class="steps_item_text">赠送好友免单卡</view>
              </view>
              <view class="steps_jiantou">
                <image :src="BaseImgUrl + '/makemoney/getmaker_jiantou01.png'" mode="widthFix" style="width: 100%"></image>
              </view>
              <view class="steps_item">
                <view class="steps_item_title">
                  <image :src="BaseImgUrl + '/makemoney/getmaker_num02.png'" mode="widthFix" style="width: 28rpx"></image>
                  <text style="margin-left: 10rpx;">好友下单</text>
                </view>
                <view class="steps_item_text">成为有效团员</view>
              </view>
              <view class="steps_jiantou">
                <image :src="BaseImgUrl + '/makemoney/getmaker_jiantou01.png'" mode="widthFix" style="width: 100%"></image>
              </view>
              <view class="steps_item">
                <view class="steps_item_title">
                  <image :src="BaseImgUrl + '/makemoney/getmaker_num03.png'" mode="widthFix" style="width: 28rpx"></image>
                  <text style="margin-left: 10rpx;">获得团长收益</text>
                </view>
                <view class="steps_item_text">多送多得</view>
              </view>
            </view>
            <view class="getmaker_img_box">
              <view v-for="(item, index) in checkImgData" :key="index" @click="checkImg(item)" class="getmaker_img_item">
                <view class="check_icon"><u-icon :name="item.isCheck ? 'checkmark-circle-fill' : 'checkmark-circle'" size="30" color="#FFFFFF"></u-icon></view>
                <!--<image :src="item.img" mode="widthFix" style="width: 100%;border-radius: 20rpx;"></image>-->
                <cache-image :img-src="item.img" :isimg="true" imgMode="widthFix" :image-style="{width: '100%', height: 'auto', borderRadius: '20rpx'}"></cache-image>
                <!--<view class="getmaker_img_text">
                  <view>{{ item.title }}</view>
                  <view v-html="item.content"></view>
                </view>-->
                <!--<view class="mp_erweima"><image :src="BaseImgUrl + '/makemoney/mp_erweima.jpg'" mode="widthFix" style="width: 100%;border-radius: 50%;"></image></view>-->
              </view>
            </view>
            <view class="getmaker_Invitation_code">
              <view class="invitation_code_left">
                <view class="Invitation_code"><text>我的邀请码</text><text style="font-weight: bold;margin-left: 20rpx;">{{ temCod }}</text></view>
                <view @click="isShowBindMaker = true" class="Invitation_code_text"><text>邀请码如何绑定团员?</text><image :src="BaseImgUrl + '/makemoney/getmaker_jiantou02.png'" mode="widthFix" style="width: 28rpx;margin-left:10rpx;"></image></view>
              </view>
              <view @click="copyCode" class="invitation_code_right">复制</view>
            </view>
            <view class="getmaker_foot">
              <view class="getmaker_foot_title">
                <view class="getmaker_foot_title_text">选择分享方式</view>
                <view class="getmaker_foot_title_right">
                  <u-icon name="arrow-left" size="16" color="#888888"></u-icon>
                  <text>左右滑动查看</text>
                  <u-icon name="arrow-right" size="16" color="#888888"></u-icon>
                </view>
              </view>
              <view class="getmaker_foot_content">
                <scroll-view class="uni-swiper-tab" scroll-x>
                  <view v-for="(item,index) in shareIcon" :key="index" class="getmaker_foot_content_item">
                    <!-- #ifdef MP -->
                    <button v-if="item.title == '微信好友'" class="complete1" open-type="share">
                      <!--<image :src="item.img"  mode="widthFix" style="width: 64rpx;"></image>-->
                      <cache-image :img-src="item.img" :isimg="true" imgMode="widthFix" :image-style="{width: '64rpx', height: '64rpx'}"></cache-image>
                      <view class="getmaker_foot_content_item_text">{{ item.title }}</view>
                    </button>
                    <view v-else-if="item.subTitle" @click="ClickShareIcon(item)" style="position: relative;">
                      <view class="getmaker_foot_content_item_tip" :style="{color: item.subTitleColor,background: item.subTitleBack, borderColor: item.subTitleBorderColor}">{{item.subTitle}}</view>
                      <cache-image :img-src="item.img" :isimg="true" imgMode="widthFix" :image-style="{width: '64rpx', height: '64rpx'}"></cache-image>
                      <view class="getmaker_foot_content_item_text">{{ item.title }}</view>
                    </view>
                    <view v-else @click="ClickShareIcon(item)">
                      <cache-image :img-src="item.img" :isimg="true" imgMode="widthFix" :image-style="{width: '64rpx', height: '64rpx'}"></cache-image>
                      <view class="getmaker_foot_content_item_text">{{ item.title }}</view>
                    </view>
                    <!-- #endif -->
                    <!-- #ifdef APP-PLUS -->
                    <view v-if="item.subTitle" @click="ClickShareIcon(item)" style="position: relative;">
                      <view class="getmaker_foot_content_item_tip" :style="{color: item.subTitleColor,background: item.subTitleBack, borderColor: item.subTitleBorderColor}">{{item.subTitle}}</view>
                      <cache-image :img-src="item.img" :isimg="true" imgMode="widthFix" :image-style="{width: '64rpx', height: '64rpx'}"></cache-image>
                      <view class="getmaker_foot_content_item_text">{{ item.title }}</view>
                    </view>
                    <view v-else @click="ClickShareIconAPP(item)">
                      <cache-image :img-src="item.img" :isimg="true" imgMode="widthFix" :image-style="{width: '64rpx', height: '64rpx'}"></cache-image>
                      <view class="getmaker_foot_content_item_text">{{ item.title }}</view>
                    </view>
                    <!-- #endif -->
                    <!-- #ifdef H5 -->
                    <!--<view v-if="item.title == '微信好友'" @click="h5Share(item)">
                      <image :src="item.img" style="width: 64rpx;height: 64rpx;"></image>
                      <view class="getmaker_foot_content_item_text">{{ item.title }}</view>
                    </view>-->
                    <view v-if="item.title == '微信好友'" @click="ClickShareIconH5(item)">
                      <cache-image :img-src="item.img" :isimg="true" imgMode="widthFix" :image-style="{width: '64rpx', height: '64rpx'}"></cache-image>
                      <view class="getmaker_foot_content_item_text">{{ item.title }}</view>
                    </view>
                    <view v-else-if="item.subTitle" @click="ClickShareIconH5(item)" style="position: relative;">
                      <view class="getmaker_foot_content_item_tip" :style="{color: item.subTitleColor,background: item.subTitleBack, borderColor: item.subTitleBorderColor}">{{item.subTitle}}</view>
                      <cache-image :img-src="item.img" :isimg="true" imgMode="widthFix" :image-style="{width: '64rpx', height: '64rpx'}"></cache-image>
                      <view class="getmaker_foot_content_item_text">{{ item.title }}</view>
                    </view>
                    <view v-else @click="ClickShareIconH5(item)">
                      <cache-image :img-src="item.img" :isimg="true" imgMode="widthFix" :image-style="{width: '64rpx', height: '64rpx'}"></cache-image>
                      <view class="getmaker_foot_content_item_text">{{ item.title }}</view>
                    </view>
                    <!-- #endif -->
                  </view>
                </scroll-view>
              </view>
            </view>
          </scroll-view>
        </view>
      </view>
    </u-popup>
    <!--面对面扫码-->
    <u-popup :show="isShowFace" mode="center" :round="10" @close="isShowFace = false" closeable :safe-area-inset-bottom="false" :customStyle="{width: '80%',height: '630rpx'}">
      <view class="shops-info">
        <!--<view class="shops-title" style="text-align: center;">
          &lt;!&ndash;<image :src="BaseImgUrl + '/home/qunicon.png'"></image>&ndash;&gt;
          <cache-image :img-src="BaseImgUrl + '/home/qunicon.png'" :isimg="true" imgMode="widthFix" :image-style="{width: '100rpx', height: '100rpx'}"></cache-image>
          <view class="true_title">领食周边购贵阳团长群</view>
        </view>-->
        <view class="erweima">
          <image :src="qrCodeShow" mode="widthFix" show-menu-by-longpress></image>
          <!--<cache-image
              :img-src="checkedImg"
              show-menu="show-menu-by-longpress" :isimg="true" imgMode="widthFix" :image-style="{width: '90%', height: '90%'}"></cache-image>-->
          <view>长按保存二维码图片</view>
        </view>
      </view>
    </u-popup>
    <!--绑定团员弹窗-->
    <u-popup :show="isShowBindMaker" mode="bottom" :round="20" @close="isShowBindMaker = false" :safe-area-inset-bottom="false" :customStyle="{width: '100%'}">
      <view class="bind_maker_box">
        <view class="bind_maker_title">
          <view class="bind_maker_title_text">邀请码如何绑定？</view>
          <view class="close" @click="close('bind')"><u-icon name="close" size="20" color="#333333"></u-icon></view>
        </view>
        <view class="bind_maker_content">
          <view class="bind_maker_item">
            <view class="bind_maker_item_title">方法一</view>
            <view class="bind_maker_item_text">复制邀请码后，打开APP自动绑定或在搜索框搜索即可绑定</view>
            <view class="bind_maker_item_img">
              <image :src="BaseImgUrl + '/makemoney/getmaker_bind_img01.png'" mode="widthFix" style="width: 100%;"></image>
            </view>
          </view>
          <view class="bind_maker_item">
            <view class="bind_maker_item_title">方法二</view>
            <view class="bind_maker_item_text">H5/微信小程序打开后在搜索框搜索或个人中心，点击【立即入团】填写邀请码绑定成功</view>
            <view class="bind_maker_item_img">
              <image :src="BaseImgUrl + '/makemoney/getmaker_bind_img02.png'" mode="widthFix" style="width: 100%;"></image>
            </view>
          </view>
          <view class="bind_maker_item">
            <view class="bind_maker_item_title">温馨提示</view>
            <view class="bind_maker_item_text">邀请码除 {{ temCod }}部分不能修改，其余部分内容都可以修改</view>
            <view class="bind_maker_item_img">

            </view>
          </view>
        </view>
        <view @click="isShowBindMaker = false" class="bind_maker_btn">我知道了</view>
      </view>
    </u-popup>
    <!--复制邀请码弹窗-->
    <u-popup :show="isShowCopy" mode="center" :round="10" @close="isShowCopy = false" bg-color="transparent" :safe-area-inset-bottom="false" :customStyle="{width: '600rpx',height: '630rpx'}">
      <view class="maker_copy_box">
        <view @click="isShowCopy = false" class="close"><view class="close_icon"><u-icon name="close" size="20" color="#FFFFFF"></u-icon></view></view>
        <view class="maker_copy_content">
          <view class="maker_copy_bg"><image :src="BaseImgUrl + '/makemoney/getmaker_copy_bg.png'" mode="widthFix" style="width: 100%;"></image></view>
          <view class="maker_copy_warp">
            <view class="title">邀请码复制成功</view>
            <view class="sub_title">分享给好友，成功绑定邀请码成为团员 下单你至多可得<text style="color: #FD1F1F;">23元奖励</text></view>
            <view v-for="(item,index) in copyData" :key="index" class="maker_copy_item">
              <!--#ifdef MP-->
              <!--<button v-if="item.title == '微信好友'" class="complete1" open-type="share">
                <image :src="item.img"  mode="widthFix" style="width: 64rpx;"></image>
                <view class="getmaker_foot_content_item_text">{{ item.title }}</view>
              </button>-->
              <view @click="ClickCopyIcon(item)" style="position: relative">
                <text class="maker_copy_item_text" v-if="item.tip">{{ item.tip }}</text>
                <image :src="item.img"  mode="widthFix" style="width: 64rpx;"></image>
                <view class="getmaker_foot_content_item_text">{{ item.title }}</view>
              </view>
              <!--#endif-->
              <!--#ifdef APP-PLUS-->
              <view @click="ClickCopyIcon(item)" style="position: relative">
                <text class="maker_copy_item_text" v-if="item.tip">{{ item.tip }}</text>
                <image :src="item.img"  mode="widthFix" style="width: 64rpx;"></image>
                <view class="getmaker_foot_content_item_text">{{ item.title }}</view>
              </view>
              <!--#endif-->
              <!--#ifdef H5-->
              <view @click="ClickCopyIcon(item)" style="position: relative">
                <text class="maker_copy_item_text" v-if="item.tip">{{ item.tip }}</text>
                <image :src="item.img"  mode="widthFix" style="width: 64rpx;"></image>
                <view class="getmaker_foot_content_item_text">{{ item.title }}</view>
              </view>
              <!--#endif-->
            </view>
          </view>
        </view>
      </view>
    </u-popup>
    <!-- 我的报名按钮，固定在页面右侧 -->
    <!--<view style="width: 128rpx;height: 128rpx;;position: fixed;z-index: 199;right: -20rpx;bottom: 38%;"
          @click="toMyJoin">
      <image style="width: 158rpx;height: 158rpx;;margin: -30rpx" mode="heightFix"
             :src="BaseImgUrl + '/once/lstz/my_task.png'"></image>
    </view>-->
  </view>
</template>

<script setup>
import {ref, onMounted} from "vue";
import {onLoad, onShow, onReady, onShareAppMessage, onShareTimeline} from "@dcloudio/uni-app";
import {useUserInfoStore} from "../../stores/modules/userInfo";
import {
  getActivitiesAPI, getInviteCodeAPI,
  getJoinActivitiesAPI,
  getMyMembersAPI,
  getMyMoneyAPI,
  getRankListAPI,
  getReportAPI,
  getRulesAPI, getShareAPI
} from "../../services/makeMoney";
import {BaseImgUrl, BaseURL} from "../../utils/lshttp";
import {getBindPidAPI, getUserInfoAPI} from "../../services/me";
import {useCommonInfoStore} from "../../stores/modules/commonInfo";
import CacheImage from "../../components/CacheImage.vue";
import {getWxShare, toChallenge} from "../../utils/utils";
import {requestAndroidPermission} from "../../js_sdk/wa-permission/permission";
import {
  userJoinChallengeAPI,
  // challengeAPI,
  joinChallengePI,
  // signInChallengeAPI,
  getJoinCheckChallengeAPI, getCheckChallengeAPI, waiveChallengeAPI, challengeNumAPI, challengeAPI
} from "../../services/lstz";
import LszbgCountDown from "../../components/LszbgCountDown.vue";
// #ifdef H5
import jweixin from "weixin-js-sdk";
// #endif
const commonInfoStore = useCommonInfoStore()
console.log('城市信息=', commonInfoStore.addressDel.city)
const userInfoStore = useUserInfoStore()
const xb_show = ref(false)
const navHeight = ref(0)
const group_hot_index = ref(0)
const user = ref()
const userAvatar = ref()
const syData = ref([
  {
    num: 0,
    text: '今日收益'
  }, {
    num: 0,
    text: '累计收益'
  }, {
    num: 0,
    text: '累计团员'
  }
])
const hotRank = ref(['总排行', '月排行', '周排行'])
const rulesData = ref()
const reportData = ref()
const rankData = ref()
const city = ref('')
const timeColor = ref({
  color: '#FF4253',
  fontWeight: 'bold',
}) //倒计时字体颜色

onLoad(() => {
  // navHeight.value = uni.getSystemInfoSync().statusBarHeight + 60
  console.log('获取页面高度=', uni.getWindowInfo())
  console.log('获取页面内容=',  uni.getDeviceInfo())
  city.value = commonInfoStore.addressDel.city
  console.log('城市=', city.value)
  // 获取团队分享海报事件
  getShare()
  // 签到活动方法
  getChallengeFun()
  // 获取挑战赛列表方法
  getChallengeList()
  // 大活动列表方法
  // getActivitiesList()


})
onShow(() => {
  if (userInfoStore.isLoginBool()) {
    user.value = userInfoStore.userInfo
    getUserInfo()
    getAllData()
    getMakeCode()
  }
})
const getUserInfo = async () => {
  const res = await getUserInfoAPI()
  user.value = res.result
  userAvatar.value = res.result.avatar
  console.log('userAvatar=', userAvatar.value)
  userInfoStore.setUserInfo(user.value)
  // // 设置分销商
  // if (commonInfoStore.resellerId && !user.value.reseller_id) {
  //   await getBindResellerIdAPI(commonInfoStore.resellerId)
  // }
  // 设置推荐人
  if (commonInfoStore.parentId && !user.value.parent_id) {
    await getBindPidAPI(commonInfoStore.parentId)
  }
}
const getAllData = () => {
  getRules() // 获取团队信息
  getReport()
  getRankList()
  getMyMoney()
  getMyMembers()

// 签到打卡
  getUserJoinChallengeAPI()

}
const handleOpenView = () => {
  if (!userInfoStore.isLogin()) {
    return
  }
  uni.navigateTo({
    url: '/pages/makemoney/detailmoney'
  })
}
const handleOpenView1 = () => {
  if (!userInfoStore.isLogin()) {
    return
  }
  uni.navigateTo({
    url: '/pages/makemoney/rangkinglist'
  })
}
const handleOpenView2 = () => {
  if (!userInfoStore.isLogin()) {
    return
  }
  uni.navigateTo({
    url: '/pages/makemoney/mygroup?spread_money=' + syData.value[1].num + '&spread_people_num=' + syData.value[2].num
  })
}
// 获取省钱小报数据
const getReport = async () => {
  if (!reportData.value) {
    const res = await getReportAPI()
    reportData.value = res.result
    setTimeout(()=>{
      poster.value.canvasToTempFilePathSync({
        fileType: 'png',
        quality: 1,
        success: (res) => {
          picture.value = res.tempFilePath
        }
      })
    },680)
  }

}
const getRankList = async () => {
  const res = await getRankListAPI({type: type.value})
  rankData.value = res.result
}
// 获取我的收益数据
const getMyMoney = async () => {
  const res = await getMyMoneyAPI()
  syData.value[0].num = res.result.today_income_money
  syData.value[1].num = res.result.income_money
  syData.value[2].num = res.result.spread_people_num
}
const getRules = async () => {
  const res = await getRulesAPI(commonInfoStore.addressDel.city)
  rulesData.value = res.result
  console.log('挑战赛贵阳站:', rulesData.value)
  if (rulesData.value.is_open === 0) {
    uni.showModal({
      title: '提示',
      content: '当前运营商未开启活动奖励，可联系客服开通',
      confirmText: '联系客服',
      success: (res) => {
        if (res.confirm) {
          commonInfoStore.toKeFu()
        }
      }
    })
  }
}
const memberLists = ref([])
const getMyMembers = async () => {
  const res = await getMyMembersAPI()
  // console.log('我的团员:', res.result.list)
  memberLists.value = res.result.list
  await getActivitiesList(res.result)
}
const handleOpenMembers = async () => {
  if (!userInfoStore.isLogin()) {
    return
  }
  // 显示邀请好友弹窗  ——新版本
  isShowGetMaker.value = true
  checkImgData.value.forEach(item => {
    if (item.id === 1){
      item.isCheck = true;
    } else{
      item.isCheck = false;
    }
  })
  checkImg()
  scrollToTop()
  /* 旧版本-点击邀请好友 */
  /* setTimeout(() => {
    uni.navigateTo({
      url: '/pages/makemoney/getmaker'
    })
  }, 1000) */
  let data = {
    user_id: userInfoStore.userInfo.id,
    city: commonInfoStore.addressDel.city
  }
  const res = await getJoinActivitiesAPI(data)
  if (res.status === 1) {
    uni.showToast({
      title: res.msg,
      icon: 'none',
    })
  }

}
const hot_rank = ref(0)
const type = ref(1)
const handleHotRank = (Index) => {
  if (Index === 0) {
    type.value = 1
  } else if (Index === 1) {
    type.value = 2
  } else {
    type.value = 3
  }
  hot_rank.value = Index
  getRankList()
}



const poster = ref()
const picture = ref()
const fail = (v) => {
  console.log(v)
}
const done = (v) => {
  console.log('绘制完成:')
  poster.value.canvasToTempFilePathSync({
    fileType: 'png',
    quality: 1,
    success: (res) => {
      picture.value = res.tempFilePath
    }
  })
}

const getPermission = async () => {
  let platform = uni.getDeviceInfo().platform
  if (platform === 'ios') {
    save()
    return
  }

  const photo = uni.getStorageSync("images")
  if (photo) {
    save()
    return
  }
  uni.showModal({
    title: '提示',
    content: "保存图片需要获取您设备上的相册权限，是否同意授权？",
    confirmText: '同意授权',
    success: async function (res) {
      if (res.confirm) {
        const result = await requestAndroidPermission("android.permission.WRITE_EXTERNAL_STORAGE")
        if (result === 1) {
          uni.setStorageSync("images", true)
          save()
        } else if (result === 0) {
          uni.setStorageSync('images', false)
        } else {
          uni.setStorageSync('images', false)
        }
      }
    }
  })
}

const save = () => {
  saveImage()
}
const saveImage = () => {
  console.log("123123",picture.value)
  // #ifndef H5
  uni.saveImageToPhotosAlbum({
    filePath: picture.value,
    success(res) {
      uni.showToast({
        title: '已保存到相册',
        icon: 'success',
        duration: 2000
      });
    },fail(res){
      uni.showToast({
        title: res,
        icon: 'none',
        duration: 2000
      });
    },
  });
  // #endif
  // #ifdef H5
  uni.showToast({title: "长 按 保 存 图 片", icon: "none"})
  // #endif
}
/* 下单奖励等级 */
const orderReward = ref([
  {
    tab_title: '首单奖励',
    content: '必定获得',
    price: 3
  },
  {
    tab_title: '第二单奖励',
    content: '必定获得',
    price: 10
  },
  {
    tab_title: '三单以后奖励',
    content: '随机不超过',
    price: 10
  },

])
/* 邀请奖励 */
const inviteReward = ref([
  {
    tab_title: '奖励',
    content: '邀请2名好友下单',
    user_ids: 2,
    price: 15,
    isOrderId: 0
  },
  {
    tab_title: '奖励',
    content: '邀请5名好友下单',
    user_ids: 5,
    price: 50,
    isOrderId: 0
  },
  {
    tab_title: '奖励',
    content: '邀请7名好友下单',
    user_ids: 7,
    price: 88,
    isOrderId: 0
  }
])

const resellerId = ref()
const inviteListData = ref([])
// 定义邀请奖励列表
const inviteList = ref([])
// 获取邀请好友下单接口
const getCode = async () => {
  const city = commonInfoStore.addressDel.city
  const res = await userJoinChallengeAPI(1, 1, 10, userInfoStore?.userInfo?.id, city)
  res.result.forEach(item => {
    if (res.result && item.type === 2){
      inviteListData.value = item
      if (item.reward_steps){
        inviteListData.value.reward_steps = JSON.parse(inviteListData.value.reward_steps)
      }
      if (item.nums){
        item.reward_steps.forEach(item1 => {
          if (item.nums >= item1.condition) {
            inviteList.value.push(item1)
          }
        })
      }
    }
  })
  console.log('inviteList==', inviteList.value)
}

const prizeText = ref("邀请用户第一次下单邀请方必定获得3元，第二次下单必定获得10元，第三次下单后随机奖励至多克获得10元，若用户在活动期间内邀请两名用户下单即可额外获得15元，若邀请5名用户下单即可额外获得50元，若邀请7名用户下单即可额外获得88元。")
const rules_show = ref(false)
const rules_close = () => {
  rules_show.value = !rules_show.value
}
// 获取任务列表
const challengeList = ref([])
const getChallengeFun = async () => {
  const res = await getCheckChallengeAPI(city, userInfoStore?.userInfo?.id)
  if (res.result != ''){
    res.result.end_time  = res.result.end_time.split(' ')[0];
    challengeList.value = res.result
  }
  console.log('challengeList==',  res.result, isCheckChallenge.value)
}
// 获取挑战赛列表数据
const isCheckChallenge = ref(false)
const getChallengeList = async () => {
  const res = await challengeAPI(city.value, userInfoStore?.userInfo?.id)
  console.log('res==', res.result)
  isCheckChallenge.value = true
}
// 签到拿奖励
const userJoinChallenge = ref()
const isUserJoinChallenge = ref(false)
const getUserJoinChallengeAPI = async () => {
  const city = commonInfoStore.addressDel.city
  const res = await getJoinCheckChallengeAPI(1, userInfoStore?.userInfo?.id, city)
  userJoinChallenge.value = res.result
  // 判断userJoinChallenge对象是否为空，如果为空则返回false
  isUserJoinChallenge.value = userJoinChallenge.value !== 0;
}
// 报名是否开启弹窗
const showJoin = ref(false)
// 任务奖励容器
const currentJoinItem = ref({})
// 免费报名
const fire_join = (item) => {
  if (!userInfoStore.isLogin()) {
    return
  }
  showJoin.value = true
  currentJoinItem.value = item
}
// 勾选协议
const check_on = ref(0)
const check_icon = () => {
  if (check_on.value === 1) {
    check_on.value = 0
  } else {
    check_on.value = 1
  }
}
// 点击挑战规则
const lsgz = () => {
  uni.navigateTo({url: "/challenge/challengeRule?type=1"})
}
// 点击立即报名
const immediately = async () => {
  if (check_on.value === 0) {
    await uni.showToast({title: "请认真阅读并同意挑战规则", icon: "none"})
    return
  }
  // 打开报名弹窗
  showJoin.value = false
  // 显示用户任务列表，并关闭活动列表
  isUserJoinChallenge.value = true
  const res = await joinChallengePI(currentJoinItem.value.id, userInfoStore?.userInfo?.id)
  await uni.showToast({title: '报名成功', icon: "none", duration: 3000})
  await getUserJoinChallengeAPI()
}
// 放弃挑战
const giveUpTask = async () => {
  const res = await waiveChallengeAPI(userJoinChallenge.value.id, userInfoStore?.userInfo?.id)
  await uni.showToast({title: res.msg, icon: "none", duration: 3000})
  close();
  // 关闭用户任务列表，并显示活动列表
  isUserJoinChallenge.value = false
}
const isGiveUp = ref(false)
const giveUpChallenge = async () => {
  isGiveUp.value = true
}
function close(e) {
  if(e == 'GiveUp'){
    isGiveUp.value = false;
  } else if (e == 'Erweima'){
    isShowErweima.value = false;
  } else if (e == 'GetMaker'){
    isShowGetMaker.value = false;
  } else if (e == 'bind'){
    isShowBindMaker.value = false;
  }

}
// 邀请好友
const isJoinActive = ref(false)
// 大活动列表
const ActivityListData = ref([])
const getActivitiesList = async (data) => {
  let res = await getActivitiesAPI()
  if (res.result){
    isJoinActive.value = true
    ActivityListData.value = res.result
    ActivityListData.value.reward_steps = JSON.parse(ActivityListData.value.reward_steps)
    /* let endTime = res.result.end_time
    let nums = '';
    data.forEach(item => {
      if (new Date(item.create_time).getTime() < new Date(endTime).getTime()) {
        nums++
      }
    })
    ActivityListData.value.reward_steps.forEach(item => {
      if (nums >= item.condition) {
        inviteList.value.push(item)
      }
    }) */
    // console.log('邀请奖励列表==',  inviteList.value)
  }
}
// 大活动规则
const makeMoneyRuleFun = async () => {
  uni.navigateTo({url: "/pages/makemoney/makemoney-rule"})
}
// 去下单
const goBuyFun = () =>  {
  uni.switchTab({url: "/pages/index/index"})
}

// 我的报名
const toMyJoin = () => {
  uni.navigateTo({url: "/pages/makemoney/makemoney-my-join?reseller_id=" + resellerId.value})
}
// 团长群弹窗
const isShowErweima = ref(false)
// 邀请好友弹窗
const isShowGetMaker = ref(false)
const getMakerStyle = {
  width: '100%',
  height: uni.getWindowInfo().windowHeight + 'px',
}
// 复制邀请码
const copyCode = () => {
  uni.setClipboardData({
    data: temCodContent.value,
    success() {
      uni.showToast({title: "邀请码复制成功", icon: 'none', duration: 2000});
    }
  })
  // 复制弹窗显示
  isShowCopy.value = true
  // 邀请好友弹窗隐藏
  isShowGetMaker.value = false
}
// 是否开启绑定团员弹窗
const isShowBindMaker = ref(false)
// 是否开启复制弹窗
const isShowCopy = ref(false)
// 复制弹窗数据
const copyData = ref([
  {
    id: 1,
    img: BaseImgUrl + '/makemoney/icon/share_icon_wx.png',
    isShow: true,
    title: '微信好友',
    content: '分享给微信好友',
    tip: ''
  },
  {
    id: 2,
    img: BaseImgUrl + '/makemoney/icon/share_icon_xhs.png',
    isShow: true,
    title: '小红书',
    content: '分享给小红书',
    tip: '推荐'
  },
  {
    id: 3,
    img: BaseImgUrl + '/makemoney/icon/share_icon_pyq.png',
    isShow: true,
    title: '朋友圈',
    content: '分享给朋友圈',
    tip: ''
  },
  {
    id: 4,
    img: BaseImgUrl + '/makemoney/icon/share_icon_qq.png',
    isShow: true,
    title: 'QQ好友',
    content: '分享给QQ好友',
    tip: ''
  },
  {
    id: 5,
    img: BaseImgUrl + '/makemoney/icon/share_icon_dy.png',
    isShow: true,
    title: '抖音',
    content: '分享给抖音',
    tip: ''
  },
])
// 复制弹窗事件
const ClickCopyIcon = async (res) => {
  console.log('复制平台数据=', res)
  console.log('平台类型=', platform)
  // #ifdef APP-PLUS
  if(platform == "android"){
    /* plus.runtime.openURL("https://lsz.lszbg.com/", function (e) {
      uni.showToast({title: "打开小红书APP失败，请手动打开小红书APP分享", icon: "none", duration: 3000})
    }); */
    if (res.title == '微信好友'){
      plus.runtime.launchApplication({pname:"com.tencent.mm"}, function(e) {
        uni.showToast({title: "打开微信APP失败，请手动打开微信APP分享", icon: "none", duration: 3000})
        console.log(JSON.stringify(e));
      });
    }else if (res.title == '小红书'){
      plus.runtime.launchApplication({pname:"com.xingin.xhs"}, function(e) {
        uni.showToast({title: "打开小红书APP失败，请手动打开小红书APP分享", icon: "none", duration: 3000})
      });
    }else if (res.title == '抖音'){
      plus.runtime.launchApplication({pname:"com.ss.android.ugc.aweme"}, function(e) {
        console.log('e=',e);
        if(e.code == '-99' && e.message == 'null'){
          uni.showToast({title: "你的手机未安装抖音，将自动尝试打开抖音极速版，请稍后...", icon: "none", duration: 3000})
          setTimeout( function (){
            plus.runtime.launchApplication({pname:"com.ss.android.ugc.aweme.lite"}, function(e) {
              uni.showToast({title: "打开抖音APP失败，请手动打开抖音APP分享", icon: "none", duration: 3000})
            });
          },3000)
        }else{
          uni.showToast({title: "打开抖音APP失败，请手动打开抖音APP分享", icon: "none", duration: 3000})
        }
      });
    }else if (res.title == '朋友圈'){
      plus.runtime.launchApplication({pname:"com.tencent.mm"}, function(e) {
        uni.showToast({title: "打开微信APP失败，请手动打开微信APP分享", icon: "none", duration: 3000})
      });
    }else if (res.title == 'QQ好友'){
      plus.runtime.launchApplication({pname:"com.tencent.mobileqq"}, function(e) {
        uni.showToast({title: "打开QQ好友APP失败，请手动打开QQ好友APP分享", icon: "none", duration: 3000})
      });
    }
  } 
  else if(platform == "ios") {
    if (res.title == '微信好友'){
      plus.runtime.launchApplication({action: 'weixin://'}, function(e) {
        uni.showToast({title: "打开微信APP失败，请手动打开微信APP分享", icon: "none", duration: 3000})
      });
    } else if (res.title == '小红书'){
      plus.runtime.launchApplication({ action: 'xhsdiscover://home' }, function(e) {
        uni.showToast({title: "打开小红书APP失败，请手动打开小红书APP分享", icon: "none", duration: 3000})
      });
    } else if (res.title == '朋友圈'){
      plus.runtime.launchApplication({action: 'weixin://'}, function(e) {
        uni.showToast({title: "打开微信APP失败，请手动打开微信APP分享", icon: "none", duration: 3000})
      });
    } else if (res.title == 'QQ好友'){
      plus.runtime.launchApplication({action: 'mqq://'}, function(e) {
        uni.showToast({title: "打开QQ好友APP失败，请手动打开QQ好友APP分享", icon: "none", duration: 3000})
      })
    } else if (res.title == '抖音'){
      plus.runtime.launchApplication({action: 'snssdk1128://feed'}, function(e) {
        if (e.code == '-99' && e.message == 'null'){
          uni.showToast({title: "你的手机未安装抖音，将自动尝试打开抖音极速版，请稍后...", icon: "none", duration: 3000})
          setTimeout( function (){
            plus.runtime.launchApplication({action: 'snssdk2329://feed'}, function(e) {
              uni.showToast({title: "打开抖音APP失败，请手动打开抖音APP分享", icon: "none", duration: 3000})
            });
          },3000)
        } else {
          uni.showToast({title: "打开抖音APP失败，请手动打开抖音APP分享", icon: "none", duration: 3000})
        }
      });
    }

  }
  // #endif
  // #ifdef MP || H5
  if (res.title == '小红书'){
    uni.showToast({title: "复制成功,请打开小红书APP分享", icon: 'none', duration: 3000});
  } else if (res.title == 'QQ好友'){
    uni.showToast({title: "复制成功,请打开QQ-APP好友分享", icon: 'none', duration: 3000});
  } else if (res.title == '抖音'){
    uni.showToast({title: "复制成功,请打开抖音APP分享", icon: 'none', duration: 3000});
  } else if (res.title == '朋友圈'){
    uni.showToast({title: "复制成功,请打开微信APP-朋友圈分享", icon: 'none', duration: 3000});
  } else if (res.title == '微信好友'){
    uni.showToast({title: "复制成功,请打开微信APP-好友分享", icon: 'none', duration: 3000});
  }
  // #endif
  /* if (res.title == '小红书'){
    uni.setClipboardData({
      data: temCod.value,
      success() {
        uni.showToast({title: "邀请码复制成功,请打开小红书APP分享", icon: 'none', duration: 2000});
      }
    })
  } else if (res.title == '朋友圈'){
    orderShareShow.value = true
  } else if (res.title == 'QQ好友'){
    uni.setClipboardData({
      data: temCod.value,
      success() {
        uni.showToast({title: "邀请码复制成功,请打开QQ-APP分享", icon: 'none', duration: 2000});
      }
    })
  } else if (res.title == '抖音'){
    uni.setClipboardData({
      data: temCod.value,
      success() {
        uni.showToast({title: "邀请码复制成功,请打开抖音APP分享", icon: 'none', duration: 2000});
      }
    })
  } */
}

// 获取团队分享海报
/* const checkImgData = ref([
  {
    id: 1,
    img: BaseImgUrl + '/makemoney/getmaker_banner01.png',
    isCheck: true,
    title: '微信扫一扫',
    content: "<span style='color: #FF0821;padding-right: 10rpx;'>0元</span>吃外卖霸王餐！"
  },
  {
    id: 2,
    img: BaseImgUrl + '/makemoney/getmaker_banner02.png',
    isCheck: false,
    title: '微信扫一扫',
    content: '仅限新用户可领'
  }
]) */
// 获取海报二维码展示
const qrCodeShow = ref()
const checkImgData = ref([])
const getShare = async () => {
  checkImgData.value = []
  const res = await getShareAPI()
  // console.log('分享海报', res.result.poster)
  qrCodeShow.value = res.result.qrCode
  if (res.result.poster.length > 0) {
    res.result.poster.forEach((item, index) => {
      if (!item.startsWith('http')) {
        item = BaseURL + item
      }
      checkImgData.value.push({
        id: index + 1,
        isCheck: false,
        img: item,
        title: '微信扫一扫',
        content: index === 0 ? "<span style='color: #FF0821;padding-right: 10rpx;'>0元</span>吃外卖霸王餐！" : '仅限新用户可领'
      })
    })
  }
  // checkImgData.value = res.result
  console.log('获取团队分享海报', checkImgData.value)
}

// 复制内容到其他平台分享
const temCod = ref() //邀请码
const temCodContent = ref()
const getMakeCode = async () => {
  const temCodRes = await getInviteCodeAPI()
  temCod.value = temCodRes.result.invite_code
  console.log('邀请码', temCodRes.result)
  temCodContent.value = temCodRes.result.content
}
const platform = uni.getDeviceInfo().platform //手机平台
// 分享图标
const shareIcon = ref([
  {
    id: 1,
    img: BaseImgUrl + '/makemoney/icon/share_icon_wx.png',
    isShow: true,
    title: '微信好友',
    subTitle: '',
    subTitleColor: '',
    subTitleBack: '',
    subTitleBorderColor: '',
    content: '分享给微信好友'
  },
  {
    id: 2,
    img: BaseImgUrl + '/makemoney/icon/share_icon_xhs.png',
    isShow: true,
    title: '小红书',
    subTitle: '推荐',
    subTitleColor: '#ffffff',
    subTitleBack: 'linear-gradient( 89deg, #FF3E4F 0%, #FF9E5F 100%)',
    subTitleBorderColor: '#ffffff',
    content: '分享给小红书'
  },
  {
    id: 3,
    img: BaseImgUrl + '/makemoney/icon/share_icon_pyq.png',
    isShow: true,
    title: '朋友圈',
    subTitle: '',
    subTitleColor: '',
    subTitleBack: '',
    subTitleBorderColor: '',
    content: '分享给朋友圈'
  },
  {
    id: 4,
    img: BaseImgUrl + '/makemoney/icon/share_icon_ewm.png',
    isShow: true,
    title: '面对面',
    subTitle: '微信扫',
    subTitleColor: '#3D3D3D',
    subTitleBack: '#FFFFFF',
    subTitleBorderColor: '#EAEAEA',
    content: '分享给面对面'
  },
  {
    id: 5,
    img: BaseImgUrl + '/makemoney/icon/share_icon_qq.png',
    isShow: true,
    title: 'QQ好友',
    subTitle: '',
    subTitleColor: '',
    subTitleBack: '',
    subTitleBorderColor: '',
    content: '分享给QQ好友'
  },
  {
    id: 6,
    img: BaseImgUrl + '/makemoney/icon/share_icon_dy.png',
    isShow: true,
    title: '抖音',
    subTitle: '',
    subTitleColor: '',
    subTitleBack: '',
    subTitleBorderColor: '',
    content: '分享给抖音'
  },
  {
    id: 7,
    img: BaseImgUrl + '/makemoney/icon/share_icon_link.png',
    isShow: true,
    title: '复制链接',
    subTitle: '',
    subTitleColor: '',
    subTitleBack: '',
    subTitleBorderColor: '',
    content: '复制链接'
  },
  {
    id: 8,
    img: BaseImgUrl + '/makemoney/icon/share_icon_video.png',
    isShow: true,
    title: '新手教程',
    subTitle: '',
    subTitleColor: '',
    subTitleBack: '',
    subTitleBorderColor: '',
    content: '新手教程'
  },
  {
    id: 9,
    img: BaseImgUrl + '/makemoney/icon/share_icon_download_poster.png',
    isShow: true,
    title: '下载海报',
    subTitle: '',
    subTitleColor: '',
    subTitleBack: '',
    subTitleBorderColor: '',
    content: '下载海报'
  }

])
const orderShareShow = ref(false) //订单分享进来是否弹出提示
const isShowFace = ref( false) // 是否显示面对面弹窗
const ClickShareIcon = (res) => {
  console.log('平台信息=',res, '选中的海报=', checkedImg.value)

  if (res.title == '小红书'){
    uni.setClipboardData({
      data: temCodContent.value,
      success() {
        uni.showToast({title: "复制成功,请打开小红书APP分享", icon: 'none', duration: 2000});
      }
    })
  }
  else if (res.title == '朋友圈'){
    orderShareShow.value = true
  } else if (res.title == '面对面'){
    console.log('海报图片', checkedImg.value)
    isShowFace.value = true
  } else if (res.title == 'QQ好友'){
    uni.setClipboardData({
      data: temCodContent.value,
      success() {
        uni.showToast({title: "复制成功,请打开QQ-APP分享", icon: 'none', duration: 2000});
      }
    })
  } else if (res.title == '抖音'){
    uni.setClipboardData({
      data: temCodContent.value,
      success() {
        uni.showToast({title: "复制成功,请打开抖音APP分享", icon: 'none', duration: 2000});
      }
    })
  } else if (res.title == '复制链接'){
    orderShareShow.value = true
  } else if (res.title == '新手教程'){
    uni.navigateTo({url: "/pages/index/novice"})
  } else if (res.title == '下载海报'){
    downloadPosterFun()
  }
}
/* 小程序下载海报图片 */
const downloadPosterFun = () => {
  uni.downloadFile({//下载
    url: checkedImg.value, //图片下载地址
    success: res => {
      if (res.statusCode === 200) {
        uni.saveImageToPhotosAlbum({//保存图片到系统相册。
          filePath: res.tempFilePath,//图片文件路径
          success: function() {
            uni.showToast({
              title: '图片保存成功',
              icon: 'none',
            });
          },
          fail: function(e) {
            console.log(e);
            uni.showToast({
              title: '图片保存失败',
              icon: 'none',
            });
          }
        });
      }
    }
  });
}

// 关闭微信朋友圈分享提示
const closeOrderShareShow = () => {
  orderShareShow.value = false
}
// 分享按钮进行分享
const setWxShare = (type = "message") => {
  return getWxShare({
    title: reportData.value.money ? '用领食,我总共节省了' + reportData.value.money + '元,快来看看你的吧' : '点外卖用领食周边购，每餐只要0-10元',
    path: "/pages/index/index?parent_id=" + userInfoStore.userInfo.id + "&reseller_id=" + userInfoStore.userInfo.reseller_id,
    type,
  },checkedImg.value );
}
// 转发到聊天界面
onShareAppMessage(() => {
  return setWxShare("message");
})
// 转发到朋友圈
onShareTimeline(() => {
  return setWxShare("friend");
})
/* APP分享 */
const ClickShareIconAPP = (res) => {
  if (res.title == '朋友圈'){
    handleShareTimeline()
  } else if(res.title == '微信好友'){
    handleShareWechat()
  }
  else if (res.title == 'QQ好友'){
    if (platform == 'ios'){
      plus.runtime.launchApplication({action: 'mqq://'}, function(e) {
        uni.showToast({title: "打开QQ好友APP失败，请手动打开QQ好友APP分享", icon: "none", duration: 3000})
      })
    } else if (platform == 'android') {
      plus.runtime.launchApplication({pname:"com.tencent.mobileqq"}, function(e) {
        uni.showToast({title: "打开QQ好友APP失败，请手动打开QQ好友APP分享", icon: "none", duration: 3000})
      });
    }
  }
  else if (res.title == '小红书'){
    if (platform == 'ios'){
      plus.runtime.launchApplication({ action: 'xhsdiscover://home' }, function(e) {
        uni.showToast({title: "打开小红书APP失败，请手动打开小红书APP分享", icon: "none", duration: 3000})
      });
    } else if (platform == 'android') {
      plus.runtime.launchApplication({pname:"com.xingin.xhs"}, function(e) {
        uni.showToast({title: "打开小红书APP失败，请手动打开小红书APP分享", icon: "none", duration: 3000})
      });
    }
  }
  else if (res.title == '抖音'){
    if (platform == 'ios'){
      plus.runtime.launchApplication({action: 'snssdk1128://feed'}, function(e) {
        if (e.code == '-99' && e.message == 'null'){
          uni.showToast({title: "你的手机未安装抖音，将自动尝试打开抖音极速版，请稍后...", icon: "none", duration: 3000})
          setTimeout( function (){
            plus.runtime.launchApplication({action: 'snssdk2329://feed'}, function(e) {
              uni.showToast({title: "打开抖音APP失败，请手动打开抖音APP分享", icon: "none", duration: 3000})
            });
          },3000)
        } else {
          uni.showToast({title: "打开抖音APP失败，请手动打开抖音APP分享", icon: "none", duration: 3000})
        }
      });
    } else if (platform == 'android') {
      plus.runtime.launchApplication({pname:"com.ss.android.ugc.aweme"}, function(e) {
        console.log('e=',e);
        if(e.code == '-99' && e.message == 'null'){
          uni.showToast({title: "你的手机未安装抖音，将自动尝试打开抖音极速版，请稍后...", icon: "none", duration: 3000})
          setTimeout( function (){
            plus.runtime.launchApplication({pname:"com.ss.android.ugc.aweme.lite"}, function(e) {
              uni.showToast({title: "打开抖音APP失败，请手动打开抖音APP分享", icon: "none", duration: 3000})
            });
          },3000)
        }else{
          uni.showToast({title: "打开抖音APP失败，请手动打开抖音APP分享", icon: "none", duration: 3000})
        }
      });
    }

  }
  else if (res.title == '复制链接'){
    uni.setClipboardData({
      data: BaseURL + "/#/pages/makemoney/makemoney", // 分享链接
      success() {
        uni.showToast({title: "链接复制成功", icon: 'none', duration: 2000});
      }
    })
  }
  else if (res.title == '面对面'){
    isShowFace.value = true
  }
  else if (res.title == '新手教程'){
    uni.navigateTo({url: "/pages/index/novice"})
  } else if (res.title == '下载海报'){
    downloadPosterFun()
  }
}
// H5点击事件
const ClickShareIconH5 = (res) => {
  console.log('H5点击分享', res)
  if (res.title == '小红书'){
    uni.setClipboardData({
      data: temCodContent.value,
      success() {
        uni.showToast({title: "复制成功,请打开小红书APP分享", icon: 'none', duration: 2000});
      }
    })
  }else if (res.title == '微信好友'){
    orderShareShow.value = true
  }else if (res.title == '朋友圈'){
    orderShareShow.value = true
  } else if (res.title == '面对面'){
    isShowFace.value = true
  } else if (res.title == 'QQ好友'){
    uni.setClipboardData({
      data: temCodContent.value,
      success() {
        uni.showToast({title: "复制成功,请打开QQ-APP分享", icon: 'none', duration: 2000});
      }
    })
  } else if (res.title == '抖音'){
    uni.setClipboardData({
      data: temCodContent.value,
      success() {
        uni.showToast({title: "复制成功,请打开抖音APP分享", icon: 'none', duration: 2000});
      }
    })
  } else if (res.title == '复制链接'){
    orderShareShow.value = true
  } else if (res.title == '新手教程'){
    uni.navigateTo({url: "/pages/index/novice"})
  } else if (res.title == '下载海报'){
    let urlArr = [checkedImg.value]
    onClickImg(urlArr, 0)
    // 关闭邀请好友弹窗
    isShowGetMaker.value = false
  }
  /* if (res.title == '朋友圈'){
    h5Share()
  } else if(res.title == '微信好友'){
    h5Share()
  } */
}
/* H5下载海报图片 */
const downloadPosterH5 = () => {
  // #ifdef H5
  // 尝试基础下载方案
  try {
    downloadImage(checkedImg.value);
  } catch (e) {
    // 失败后转为Canvas方案
    saveCrossOriginImage(checkedImg.value);
  }
  // #endif
  // #ifdef MP-WEIXIN
  uni.getImageInfo({
    src: this.path,
    success: function(image) {
      uni.saveImageToPhotosAlbum({
        filePath: image.path,
        success: function() {
          console.log('save success');
          uni.showToast({
            title: '图片保存成功',
            icon: 'none',
            duration: 2200
          });
        }
      });
    }
  })
  // #endif

}
const downloadImage =(url, filename = 'image') => {
  const link = document.createElement('a')
  link.href = checkedImg.value
  link.download = filename
  document.body.appendChild(link)
  link.click();
  document.body.removeChild(link)
}
const saveCrossOriginImage = (url) => {
  const img = new Image()
  img.crossOrigin = 'Anonymous'
  img.onload = function() {
    const canvas = document.createElement('canvas')
    canvas.width = img.width
    canvas.height = img.height
    const ctx = canvas.getContext('2d')
    ctx.drawImage(img, 0, 0)
    const dataURL = canvas.toDataURL('image/png')
    downloadImage(dataURL)
  };
  img.src = url;
}

// H5分享
const h5Share = async () => {
  await commonInfoStore.initJSDKConfig(false)
  console.log(`weqweqweqwe`)
  jweixin.ready(() => {
    //自定义“分享给朋友”及“分享到QQ”按钮的分享内容（1.4.0）
    jweixin.updateAppMessageShareData({
      title: reportData.value.money ? '用领食,我总共节省了' + reportData.value.money + '元,快来看看你的吧' : '点外卖用领食周边购，每餐只要0-10元', // 分享标题
      desc: "本地优惠，就在领食", // 分享描述
      type: 2,
      // link: BaseURL + "/#/?parent_id=" + userInfoStore.userInfo.id + "&applet=1", // 分享链接
      link: BaseURL + "/#/?parent_id=" + userInfoStore.userInfo.id + "&reseller_id=" + userInfoStore.userInfo.reseller_id + "&source=2" , // 分享链接
      imgUrl: checkedImg.value || BaseImgUrl + "/share/share_bg.png", // 分享图标
    });
    //自定义“分享到朋友圈”及“分享到QQ空间”按钮的分享内容（1.4.0）
    jweixin.updateTimelineShareData({
      title: '领食周边购', // 分享标题
      link: BaseURL + "/#/?parent_id=" + userInfoStore.userInfo.id + "&reseller_id=" + userInfoStore.userInfo.reseller_id + "&source=2" , // 分享链接
      imgUrl: checkedImg.value || BaseImgUrl + "/share/share_bg.png", // 分享图标
    });
  })
  jweixin.error((res) => {
    console.log(res)
    // config信息验证失败会执行error函数，如签名过期导致验证失败，具体错误信息可以打开config的debug模式查看，也可以在返回的res参数中查看，对于SPA可以在这里更新签名。
    // getSignature()
  })
}
// APP分享到微信好友
const handleShareWechat = () => {
  console.log('店铺名称=', userInfoStore.userInfo)
  uni.share({
    provider: "weixin",// 分享到的平台，例如：'weixin', 'qq', 'sinaweibo'等
    scene: "WXSceneSession",// 分享的场景，例如：'WXSceneSession'（会话），'WXSenceTimeline'（朋友圈）等
    type: 5,// 0:图文 1:纯文字 2:纯图片 3:音乐 4:视频 5:小程序
    miniProgram: {
      id: "gh_45626294c5df",
      path: "/pages/index/index?parent_id=" + userInfoStore.userInfo.id + "&reseller_id=" + userInfoStore.userInfo.reseller_id,
      webUrl: BaseURL + '/#/?parent_id=' + userInfoStore.userInfo.id + "&reseller_id=" + userInfoStore.userInfo.reseller_id,
      // TODO
      // type: 1
    },
    href: BaseURL + '/#/?parent_id=' + userInfoStore.userInfo.id,// 如果是链接类型，则需要填写链接地址
    title: reportData.value.money ? '用领食,我总共节省了' + reportData.value.money + '元,快来看看你的吧' : '点外卖用领食周边购，每餐只要0-10元',// 分享的标题
    summary: "您的好友给你推荐了（点外卖用领食周边购，每餐只要0-10元），预计花费 ￥" + reportData.value.money + "元",// 分享的摘要，仅在type为2时有效
    imageUrl: checkedImg.value || BaseImgUrl + "/share/share_bg.png",
    success: function (res) {
      console.log("success:" + JSON.stringify(res));
    },
    fail: function (err) {
      console.log("fail:" + JSON.stringify(err));
    }
  });
}
// APP分享到朋友圈
const handleShareTimeline = () => {
  uni.share({
    provider: "weixin",
    scene: "WXSceneTimeline",
    type: 0,// 0:图文 1:纯文字 2:纯图片 3:音乐 4:视频 5:小程序
    miniProgram: {
      id: "gh_45626294c5df",
      path: "/pages/index/index?parent_id=" + userInfoStore.userInfo.id + "&reseller_id=" + userInfoStore.userInfo.reseller_id,
      webUrl: BaseURL + '/#/?parent_id=' + userInfoStore.userInfo.id + "&reseller_id=" + userInfoStore.userInfo.reseller_id,
      // TODO
      // type: 1
    },
    href: BaseURL + '/#/?parent_id=' + userInfoStore.userInfo.id,
    title:  reportData.value.money ? '用领食,我总共节省了' + reportData.value.money + '元,快来看看你的吧' : '点外卖用领食周边购，每餐只要0-10元',
    summary: "您的好友给你推荐了（点外卖用领食周边购，每餐只要0-10元），预计花费 ￥" + reportData.value.money + "元",
    imageUrl: checkedImg.value || BaseImgUrl + "/share/share_bg.png",
    success: function (res) {
      console.log("success:" + JSON.stringify(res));
    },
    fail: function (err) {
      console.log("fail:" + JSON.stringify(err));
    }
  });
}

// 选中的图片
const checkedImg = ref('')
// 选择图片
const checkImg = (res) => {
  if (res){
    checkImgData.value.forEach(item => {
      if (res.id == item.id){
        item.isCheck = true
        checkedImg.value = item.img
      } else {
        item.isCheck = false
      }
    })
  }else {
    checkedImg.value = checkImgData.value[0].img
  }
  console.log('选中的图片=', checkedImg.value)
}
// 放大图片
const onClickImg = (urls, current) => {
  uni.previewImage({
    urls: urls,
    current: current
  })
}
// 滚动回顶部
const scrollToTop = () => {
  uni.pageScrollTo({
    scrollTop: 0,
    duration: 300
  })
}

</script>


<style>
page {
  background-color: #F6F6F6;
}
</style>

<style lang="scss" scoped>
page {
  background: #F6F6F6;
}
.up-button {
  background-color: white;
}
.up-button:after{
  border: none;
}
.u-status-bar,
.u-navbar__content {
  //background-image: linear-gradient(90deg, #FC5722, #FF7540, #FF7540, #FF7540);
  background-image: url('https://lsz.lszbg.com/imgs/group/top_bg.png');
  background-size: cover;
}

.top_null {
  background-image: linear-gradient(90deg, #FC5722, #FF7540, #FF7540, #FF7540);
  height: 20rpx;
}

.null_box {
  font-size: 26rpx;
  color: #b1b1b1;
  text-align: center;
  margin: 50rpx 0;
}

img, image {
  width: 100%;
  height: 100%;
  // border-radius: 100rpx;
}

.xb_content {
  width: 90%;
  height: auto;
  box-sizing: border-box;
  padding: 18rpx 18rpx;

  .my_user {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 32rpx;
    color: #B53910;
    margin-left: 50rpx;

    image {
      width: 53rpx;
      height: 53rpx;
      margin-right: 10rpx;
      border-radius: 100rpx;
    }

    .user_name {
      flex: 1;
      word-break: break-all;
      display: -webkit-box;
      -webkit-line-clamp: 1;
      -webkit-box-orient: vertical;
      overflow: hidden;
    }
  }

  .s_text {
    font-size: 32rpx;
    color: #333;
    margin-bottom: 22rpx;
    margin-top: 190rpx;
  }

  .s_price {
    color: #FC5722;
    font-size: 38rpx;
    font-weight: bold;
    margin-bottom: 20rpx;

    text {
      font-size: 32rpx;
    }
  }

  .bw_text {
    font-size: 36rpx;
    color: #FC5722;
    font-weight: bold;
    margin-bottom: 20rpx;
  }

  .yj_text {
    font-size: 28rpx;
    color: #333;
    margin-bottom: 88rpx;

    text {
      font-size: 32rpx;
      font-weight: bold;
      color: #FC5722;
    }
  }

  .us_day {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 28rpx;
    color: #888;
    margin-bottom: 40rpx;

    .day {
      color: #333;
    }
  }

  .eat_text {
    font-size: 32rpx;
    color: #FFE5D2;
    width: 460rpx;;
    letter-spacing: 0.6em;
    text-align: center;
    font-weight: bold;
    margin-top: 56rpx;
    margin-bottom: 26rpx;
  }

  .code_img {
    display: flex;
    justify-content: space-between;
    width: 100%;
    margin-left: 10rpx;
    align-items: center;
    border-radius: 0;

    .l_sm {
      box-sizing: border-box;

      .sm_text {
        font-size: 32rpx;
        color: black;
        font-weight: bold;
      }

      .desc_text {
        font-size: 24rpx;
        color: black;
        margin-top: 10rpx;
      }
    }

    .r_img {
      width: 138rpx;
      height: 138rpx;
      border-radius: 0 !important;

      image {
        margin-bottom: 10rpx;
        color: rgb(238, 218, 172);
        background-color: white;
        //border-radius: 1300rpx;
        padding: 6rpx;
      }
    }
  }
}

.sy_detail {
  width: 118rpx;
  height: 46rpx;
  line-height: 46rpx;
  text-align: center;
  background-color: #EEDAAC;
  border-radius: 200px 0 0 200px;
  position: absolute;
  margin-top: 186rpx;
  right: 0;
  font-size: 20rpx;
  color: #FC6636;
  display: flex;
  align-items: center;
  justify-content: center;

  image {
    width: 10rpx;
    height: 18rpx;
    margin-left: 10rpx;
    margin-top: 2rpx;
    display: inline-block;
  }
}

.return_title {
  //background-color: #1db9ff;
  width:690rpx;
  padding: 20rpx 30rpx 10rpx;
  position: fixed;
  z-index: 999;
  top: 0;
  background: url('https://lsz.lszbg.com/imgs/group/top_bg.png');
  background-size: cover;

  .title {
    font-size: 44rpx;
    font-weight: bold;
    color: #fff;
  }

  image {
    width: 10rpx;
    height: 18rpx;
    margin-left: 10rpx;
    margin-top: 2rpx;
    display: inline-block;
  }

  .symx {
    width: 138rpx;
    height: 46rpx;
    line-height: 46rpx;
    text-align: center;
    background-color: #EEDAAC;
    border-radius: 200px 0 0 200px;
    position: absolute;
    right: 0;
    font-size: 20rpx;
    color: #FC6636;
    display: flex;
    align-items: center;
    justify-content: center;
  }
}

.top_box {
  width: 100%;
  height: 516rpx;
  background: url('https://lsz.lszbg.com/imgs/group/top_bg.png') no-repeat top center / 100% 100%;
  box-sizing: border-box;
  padding: 0;
  position: relative;
  overflow: hidden;

  .sy_box {
    display: flex;
    justify-content: space-between;
    box-sizing: border-box;
    padding: 0 56rpx;
    text-align: center;
    margin-top: 48rpx;

    .one_box {
      .num {
        font-size: 36rpx;
        color: #fff;
        font-weight: 600;
      }

      .text {
        font-size: 28rpx;
        color: #FFEAE2;
        margin-top: 5rpx;
      }
    }
  }

  .group_user {
    width: 90%;
    height: 171rpx;
    background: url('https://lsz.lszbg.com/imgs/group/yellow_bg.png') no-repeat center center / 100% 100%;
    box-sizing: border-box;
    padding: 32rpx 48rpx;
    display: flex;
    align-items: center;
    position: absolute;
    bottom: 0;
    left: 20px;

    .left_img {
      width: 96rpx;
      height: 96rpx;
      background-color: #fff;
      box-sizing: border-box;
      padding: 4rpx;
      border-radius: 50%;
      margin-right: 24rpx;
      image {
        width: 100%;
        height: 100%;
        border-radius: 50%;
      }
    }

    .r_user {
      .username {
        font-size: 30rpx;
        color: #BC612A;
        display: flex;
        align-items: center;
        margin-bottom: 12rpx;

        .name {
          margin-right: 12rpx;
          word-break: break-all;
          display: -webkit-box;
          -webkit-line-clamp: 1;
          -webkit-box-orient: vertical;
          overflow: hidden;
          font-weight: bold;
          flex: 1;
        }

        .bq {
          display: inline-block;
          background: #FC9106;
          border-radius: 0 10px 0 10px;
          font-size: 20rpx;
          color: #fff;
          box-sizing: border-box;
          padding: 0 12rpx;
          height: 36rpx;
          line-height: 36rpx;
        }
      }

      .user_desc {
        font-size: 24rpx;
        color: #C97330;
      }
    }
  }
}

.middle_box {
  box-sizing: border-box;
  padding: 0 30rpx 30rpx;

  .notice_box {
    box-sizing: border-box;
    padding: 22rpx 30rpx;
    font-size: 26rpx;
    color: #333;
    background-color: #fff;
    border-radius: 6rpx;
    margin-top: 22rpx;
    display: flex;
    align-items: center;
    position: relative;

    text {
      color: #FC4106;
    }

    &:before {
      content: '';
      display: inline-block;
      width: 36rpx;
      height: 36rpx;
      background: url('https://lsz.lszbg.com/imgs/group/notice_icon.png') no-repeat center center / 100% 100%;
      margin-right: 14rpx;
    }

    &:after {
      content: '';
      display: inline-block;
      width: 36rpx;
      height: 36rpx;
      background: url('https://lsz.lszbg.com/imgs/group/yuan_right.png') no-repeat center center / 100% 100%;
      border-radius: 50%;
      position: absolute;
      right: 20rpx;
      top: 0;
      bottom: 0;
      margin: auto;
    }
  }

  .group_jl {
    box-sizing: border-box;
    padding: 30rpx;
    background-color: #fff;
    border-radius: 10rpx;
    margin-top: 20rpx;

    .tz_jl {
      font-size: 24rpx;
      color: #999;
      display: flex;
      position: relative;
      align-items: center;

      .name {
        font-size: 36rpx;
        color: #000;
        font-weight: bold;
        margin-right: 20rpx;
      }
    }

    .jl_box {
      display: flex;
      justify-content: space-between;
      align-items: center;
      text-align: center;
      margin: 58rpx 0;

      .small_jl {
        .money {
          font-size: 24rpx;
          color: #888;

          .num {
            font-size: 48rpx;
            color: #FC4106;
            font-weight: bold;
          }
        }

        .jl_text {
          font-size: 28rpx;
          color: #333;
          font-weight: bold;
        }

        .desc_text {
          background-color: #F2F2F2;
          font-size: 24rpx;
          color: #666666;
          box-sizing: border-box;
          padding: 6rpx 10rpx;
          margin-top: 8rpx;
          border-radius: 32rpx;
        }
      }
    }

    .vip_btn {
      width: 100%;
      height: 88rpx;
      background: linear-gradient(283deg, #FECC32 0%, #FC754A 100%);
      border-radius: 100rpx;
      font-size: 36rpx;
      color: #fff;
      font-weight: bold;
      line-height: 88rpx;
      text-align: center;
      position: relative;

      .ty_text {
        display: inline-block;
        width: 92rpx;
        height: 36rpx;
        border: 1px solid #FC754A;
        border-radius: 16rpx 16rpx 16rpx 0;
        font-size: 24rpx;
        color: #FC4106;
        background-color: #fff;
        position: absolute;
        right: 0;
        top: -17rpx;
        line-height: 34rpx;
        animation: iconBtn 2s linear infinite;
      }

      @keyframes iconBtn {
        0% {
          transform: scale(1);
        }
        50% {
          transform: scale(1.2);
        }
        100% {
          transform: scale(1);
        }
      }
    }
  }

  .tabs_hot {
    display: flex;
    align-items: center;
    margin: 40rpx 0;
    font-size: 30rpx;
    color: #555;

    .text_name {
      margin-right: 36rpx;
      position: relative;

      &.cur {
        font-size: 36rpx;
        color: #090909;
        font-weight: bold;
      }

      &.hot_text {
        &:after {
          content: '';
          display: inline-block;
          width: 30rpx;
          height: 30rpx;
          background: url('https://lsz.lszbg.com/imgs/group/hot_icon.png') no-repeat center center / 100% 100%;
          position: absolute;
          top: -10rpx;
          right: -25rpx;
          animation: icon 2s linear infinite;
        }
      }

      @keyframes icon {
        0% {
          top: -10rpx;
          transform: scale(.8);
        }
        50% {
          top: 0;
          transform: scale(1);
        }
        100% {
          top: -10rpx;
          transform: scale(.8);
        }
      }
    }
  }

  .group_list {
    background-color: #fff;
    border-radius: 10rpx;
    box-sizing: border-box;
    padding: 40rpx 30rpx;

    .g_name {
      display: flex;
      align-items: center;
      justify-content: space-between;

      .l_text {
        font-size: 26rpx;
        color: #888;

        text {
          font-size: 28rpx;
          color: #FC754A;
          font-weight: bold;
          margin: 0 10rpx;
        }
      }

      .r_text {
        font-size: 26rpx;
        color: #999;
      }
    }

    .small_group {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin: 20rpx 0;

      .l_user {
        display: flex;
        align-items: center;
        flex:1;
        .l_img {
          width: 80rpx;
          height: 80rpx;
          border-radius: 50%;
          overflow: hidden;
          margin-right: 26rpx;
        }

        .l_infor {
          width: 70%;

          .name {
            font-size: 28rpx;
            color: #333;
            font-weight: bold;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
          }

          .fisih_text {
            font-size: 24rpx;
            color: #888;
            margin-top: 5rpx;
          }
        }
      }

      .r_price {
        text-align: right;
        width: 140rpx;
        .price {
          font-size: 28rpx;
          color: #FC4106;
          font-weight: bold;
        }

        .p_text {
          font-size: 24rpx;
          color: #888;
        }
      }
    }

    .hot_tabs {
      display: flex;
      align-items: center;
      justify-content: space-between;
      font-size: 32rpx;
      color: #333;
      border-bottom: 2rpx solid #ECECEC;

      text {
        box-sizing: border-box;
        padding-bottom: 20rpx;

        &.cur {
          border-bottom: 2rpx solid #FC4106;
          margin-bottom: -2rpx;
          font-size: 32rpx;
          color: #FC4106;
        }
      }
    }

    .small_hot {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-top: 50rpx;

      .left_hot {
        display: flex;
        width: 80%;
        align-items: center;

        .mc_icon {
          width: 48rpx;
          height: 58rpx;
          text-align: center;
          font-size: 40rpx;
          color: #888;

          image {
            width: 100%;
            height: 100%;
            border-radius: 0;
          }
        }

        .head_img {
          width: 72rpx;
          height: 72rpx;
          border-radius: 50%;
          overflow: hidden;
          margin: 0 15rpx 0 38rpx;
        }

        .nickname {
          font-size: 28rpx;
          color: #333;
          font-weight: bold;
          width: 60%;
          overflow: hidden;
          white-space: nowrap;
          text-overflow: ellipsis;
        }
      }

      .r_price {
        font-size: 28rpx;
        color: #333;
        font-weight: bold;

        &.cur {
          color: #FC4106;
        }
      }
    }

    .more_rank {
      font-size: 28rpx;
      color: #FC4106;
      text-align: center;
      box-sizing: border-box;
      padding-top: 30rpx;
      border-top: 2px dashed #E6E6E6;
      margin-top: 30rpx;
      position: relative;
      display: flex;
      align-items: center;
      justify-content: center;

      image {
        width: 28rpx;
        height: 28rpx;
        margin-left: 10rpx;
      }

      &:before {
        content: '';
        display: inline-block;
        width: 30rpx;
        height: 30rpx;
        background-color: #f4f4f4;
        border-radius: 50%;
        position: absolute;
        left: -45rpx;
        top: -17rpx;
      }

      &:after {
        content: '';
        display: inline-block;
        width: 30rpx;
        height: 30rpx;
        background-color: #f4f4f4;
        border-radius: 50%;
        position: absolute;
        right: -45rpx;
        top: -17rpx;
      }
    }
  }
  /* 正在参与的挑战任务列表 */
  .task_box {
    position: relative;
    margin-top: 20rpx;
    min-height: 400rpx;
    background: #fde8a2;
    border-radius: 30rpx;
    .task_img{
      border-radius: 0;
      width: 100%;
      height: 250rpx;
      display: block;
      position: absolute;
      z-index: 10;
    }
    .task_item_content{
      min-height: 280rpx;
      background: linear-gradient(94deg, #FD6661 0%, #FFB760 100%);
      border-radius: 30rpx;
      padding: 0 20rpx  20rpx 20rpx;
      .task_item_list{
        background: #FFFFFF;
        border-radius: 20rpx;
        padding: 10rpx;
        .bm_end_time {
          font-size: 24rpx;
          color: #6B0C03;
          flex: 1;
          height: 48rpx;
          line-height: 48rpx;
          padding-left: 10rpx;
          border-radius: 20rpx 0 0 0;
          background: linear-gradient( 90deg, #FFDFD9 0%, rgba(254,212,187,0) 100%);
        }
        .fire {
          width: 31rpx;
          height: 31rpx;
          margin-bottom: 3rpx;
        }
        .join_count {
          font-size: 26rpx;
          color: #888888;
          margin-right: 10rpx;
        }
        .money_bg_content {
          margin-top: 10rpx;
          position: relative;
          height: 176rpx;
          display: flex;

          .money_bg {
            width: 140rpx;
            height: 176rpx;
            position: absolute;
            z-index: 1;
            border-radius: 0;
          }

          .money_text {
            color: #ff5c14;
            font-weight: bold;
            font-size: 49rpx;
            z-index: 100;
            position: relative;
            width: 140rpx;
            text-align: center;
            line-height: 120rpx;
          }
          .go_buy {
            height: 58rpx;
            width: 140rpx;
            padding: 0 16rpx;
            position: absolute;
            right: 0;
            bottom: 0;
            background: linear-gradient(90deg, #FF4E5E 0%, #FFB760 100%);
            border-radius: 200rpx 200rpx 200rpx 200rpx;
            text-align: center;
            line-height: 58rpx;
            color: #FFFFFF;
            font-size: 24rpx
          }
        }
        .bl_box {
          display: flex;
          align-items: center;
          justify-content: flex-end;
          margin-top: 16rpx;

          .val_num {
            font-size: 24rpx;
            color: #FF8548;
            margin-top: -2px;
          }

          .time_text {
            color: #FC7532;
            font-size: 22rpx;
          }
        }


      }
    }

    .task_title {
      position: relative;
      z-index: 10;
      font-weight: 400;
      font-size: 48rpx;
      color: #FFFFFF;
      line-height: 100rpx;
      text-align: left;
      margin-left: 20rpx;
    }

    .task_item {
      position: relative;
      margin-left: 20rpx;
      width: 670rpx;
      height: 400rpx;
      border-radius: 20rpx;
      background: #FFFFFF;
    }
  }
}
.fq_tz {
  height: 58rpx;
  padding: 0 18rpx;
  background: #FFFFFF;
  border-radius: 200rpx 200rpx 200rpx 200rpx;
  border: 2rpx solid #E5E5E5;
  text-align: center;
  line-height: 58rpx;
  color: #888888;
  font-size: 24rpx
}
.go_buy {
  height: 58rpx;
  width: 140rpx;
  padding: 0 18rpx;
  background: linear-gradient( 90deg, #FF4E5E 0%, #FFB760 100%);
  border-radius: 200rpx 200rpx 200rpx 200rpx;
  text-align: center;
  line-height: 58rpx;
  color: #FFFFFF;
  font-size: 24rpx
}

.go_buy1 {
  height: 58rpx;
  width: 140rpx;
  padding: 0 18rpx;
  background: linear-gradient(270deg, #dee9ea 0%, #d9d9e6 100%);
  border-radius: 200rpx 200rpx 200rpx 200rpx;
  text-align: center;
  line-height: 58rpx;
  color: #3D3D3D;
  font-size: 24rpx
}
.notice_box {
  position: relative;
}

.notice_box .bg_img {
  width: 100%;
  height: 1000rpx;
  vertical-align: bottom;
  border-radius: 20rpx;
}

.close_img {
  width: 50rpx;
  height: 50rpx;
  position: absolute;
  right: 30rpx;
  top: 38rpx;
  z-index: 100;
}

.notice_box .notice_content {
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 10rpx;
  box-sizing: border-box;
  padding: 0 40rpx;
  z-index: 1000;
}

.notice {
  margin-top: -200rpx;
  width: 580rpx;
  height: 800rpx;
}

.nav_box {
  display: flex;
  align-items: center;
  margin: 0 200rpx 0 20rpx;
  height: 90rpx;
  flex: 1;

  .left_box {
    z-index: 88;

    image {
      width: 68rpx;
      margin-bottom: 10rpx;
    }
  }

  .sousuo_box {
    flex: 1;
    display: flex;
    align-items: center;
    position: relative;
    width: 320rpx;

    .input_box {
      margin-left: 20rpx;
      border-radius: 200rpx;
      width: 100%;
    }

    .sousuo_btn {
      background-color: #FECC32;
      border-radius: 200rpx;
      color: #333333;
      position: absolute;
      right: 6rpx;
      width: 100rpx;
      height: 45rpx;
      line-height: 45rpx;
      font-size: 26rpx;
      text-align: center;
    }
  }

  .right_box {
    display: flex;
    align-items: center;
    position: relative;
    margin-left: 10rpx;

    image {
      width: 64rpx;
    }

    .tixing {
      width: 18rpx;
      height: 18rpx;
      border-radius: 200rpx;
      background-color: #F00;
      position: absolute;
      right: 10rpx;
      top: 10rpx;
    }
  }
}

// day_discount 折扣天天领
.day_discount {
  margin-top: 20rpx;
  padding: 20rpx;
  background: linear-gradient(180deg, #FFECE6 0%, #FFFFFF 38%, #FFFFFF 100%);
  border-radius: 16rpx 16rpx 16rpx 16rpx;
  border: 3rpx solid #FFFFFF;
  display: flex;
  flex-direction: column;

  .day_discount_top {
    display: flex;
    align-items: center;

    .day_discount_top_title {
      font-weight: bold;
      font-size: 28rpx;
      color: #3D3D3D;
      line-height: 24rpx;
    }

    .day_discount_top_sub_title {
      image {
        width: 88rpx;
        height: 36rpx;
      }
    }
  }
  /* 奖励等级css */
  .day_discount_content{
    display: flex;
    flex-wrap: wrap;
    padding: 30rpx 0;
    .day_discount_item{
      width: calc(33% - 36rpx);
      margin-right: 20rpx;
      margin-bottom: 20rpx;
      padding: 10rpx;
      border: 2rpx solid #fc754a;
      border-radius: 10rpx;
      text-align: center;
      .day_discount_item_money{
        font-size: 36rpx;
        color: #fc4106;
        font-weight: bold;
        padding: 20rpx 0 10rpx;
      }
      .day_discount_item_text{
        font-size: 24rpx;
        color: #3D3D3D;
        line-height: 36rpx;
      }
    }
    .day_discount_item:nth-child(3n){
      margin-right: 0;
    }

  }
  .day_discount_btn{
    flex: 1;
    height: 88rpx;
    background: linear-gradient(283deg,#fecc32,#fc754a);
    border-radius: 100rpx;
    font-size: 36rpx;
    color: #fff;
    font-weight: 700;
    line-height: 88rpx;
    text-align: center;
    margin-left: 20rpx;
    position: relative;
    .day_discount_btn_text{
      display: inline-block;
      width: 92rpx;
      height: 36rpx;
      border: 1px solid #FC754A;
      border-radius: 16rpx 16rpx 16rpx 0;
      font-size: 24rpx;
      color: #fc4106;
      background-color: #fff;
      position: absolute;
      right: 0;
      top: -17rpx;
      line-height: 34rpx;
      animation: iconBtn-285b58a8 2s linear infinite;
    }
  }
  .addErweima{
    width: 220rpx;
    height: 88rpx;
    background: #FFFFFF;
    border: 2rpx solid #E5E5E5;
    border-radius: 50rpx;
    font-size: 36rpx;
    color: #888888;
    font-weight: 700;
    line-height: 88rpx;
    text-align: center;
  }
}
/* 奖励等级-详细规则css */

.rules_content{
  height: 650rpx;
  overflow-y: auto;
  padding: 20rpx;
  box-shadow: 0 0 30rpx 0 rgba(0, 0, 0, 0.1);
  border-radius: 20rpx;
  .rules_title{
    font-size: 36rpx;
    color: #3D3D3D;
    padding: 30rpx 0;
    text-align: center;
  }
  .rules_content_box{
    font-size: 28rpx;
    text-indent: 56rpx;
    line-height: 50rpx;
    padding: 20rpx 0;
    color: #666666;
  }
}
.money_tz {
  z-index: 100;
  text-align: center;
  flex: 1;
  font-weight: 700;
  font-size: 48rpx;
  color: #FFF7E0;
  line-height: 64rpx;
  margin-top: 28rpx;
  margin-left: -16rpx;
}

.money_tz1 {
  color: #F95724;
}
/* 报名弹窗css */
.money_bg_content {
  margin-top: 20rpx;
  position: relative;
  display: flex;

  .money_bg {
    width: 140rpx;
    height: 176rpx;
    position: absolute;
    z-index: 1;
    border-radius: 0;
  }

  .money_text {
    color: #ff5c14;
    font-weight: bold;
    font-size: 49rpx;
    z-index: 100;
    position: relative;
    width: 140rpx;
    text-align: center;
    line-height: 120rpx;
  }
}
.join_content {
  margin: 0 38rpx;
  .join_title {
    font-weight: bold;
    font-size: 26rpx;
    color: #333333;
    line-height: 28rpx;;
    margin-bottom: 10rpx;
  }
  .activity_item {
    display: flex;
    justify-content: space-between;
    .activity_time_title {
      font-weight: 400;
      font-size: 24rpx;
      color: #888888;
      line-height: 64rpx;
    }
    .activity_time {
      font-weight: 400;
      font-size: 24rpx;
      color: #3D3D3D;
      line-height: 64rpx;
    }
  }
}
.bottom_content {
  box-shadow: -3rpx -3px 2px 1px rgba(66, 66, 66, 0.03);
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 20rpx 0;
  .protocol {
    color: #999;
    display: flex;
    font-size: 24rpx;
    justify-content: center;
    align-items: center;
    margin-bottom: 10rpx;
    .check_icon {
      width: 38rpx;
      height: 38rpx;
      position: relative;
      top: 0;
      margin-right: 7rpx;

      image {
        border-radius: 100rpx;
      }
    }
  }
  .immediately {
    font-weight: 400;
    font-size: 32rpx;
    color: #FFFFFF;
    width: 690rpx;
    height: 80rpx;
    line-height: 80rpx;
    letter-spacing: 10rpx;
    text-align: center;
    background: linear-gradient(270deg, #FC754A 0%, #FEBC5B 100%);
    border-radius: 200rpx 200rpx 200rpx 200rpx;
    box-shadow: 0 0 18rpx #FC754A;
  }
}
/* 放弃挑战弹窗css */
.box-content {
  display: flex;
  flex-direction: column;
  width: 600rpx;
  height: 600rpx;
  background: #FFFFFF;
  border-radius: 16rpx 16rpx 16rpx 16rpx;
  letter-spacing: 3rpx;

  .title {
    font-weight: bold;
    font-size: 32rpx;
    color: #000000;
    line-height: 32rpx;
    text-align: center;
    padding: 28rpx 0;
  }

  .warning {
    display: flex;
    align-items: center;
    flex-direction: column;
    justify-content: center;
    width: 100%;

    image {
      width: 76rpx;
      height: 76rpx;
    }

    text {
      font-weight: bold;
      font-size: 36rpx;
      color: #FF5621;
      line-height: 36rpx;
    }
  }

  .content {
    margin: 30rpx;
    font-weight: 400;
    font-size: 28rpx;
    color: #666666;
    line-height: 56rpx;
  }
}
/* 二维码弹窗css */
.shops-info {
  background-color: #FFFFFF;
  padding: 60rpx 30rpx 30rpx;
  border-radius: 16rpx;
  .disanbu_box {
    display: flex;
    align-items: center;
    justify-content: center;

    text {
      display: inline-block;
      background-image: linear-gradient(to left, #F8F8F8, #F97632) !important;
      width: 62px;
      height: 7px;
      border-radius: 100px;
    }

    view {
      margin: 0 30rpx;
      font-size: 34rpx;
      font-weight: bold;
    }
  }

  .erbumia3Wrap {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 30rpx;

    .erbumia3 {
      text-align: center;
      font-weight: bold;
      font-size: 26rpx;

      image {
        width: 150rpx;
      }
    }
  }


  .shops-title {
    font-weight: bold;
    font-size: 34rpx;
    margin: 0 0 25px 0;
    position: relative;
    display: flex;
    align-items: center;
    .true_title {
      padding-left: 16rpx;
    }

    text {
      display: inline-block;
      background-image: linear-gradient(to left, #F8F8F8, #F97632) !important;
      width: 62px;
      height: 7px;
      border-radius: 100px;
      position: absolute;
      left: 0;
      bottom: -8px;
    }
  }

  .shop-info-shhuom {
    display: flex;
    align-items: center;
    justify-content: space-between;

    image {
      width: 200rpx;
      height: 200rpx;
    }
  }

  .erbumia {
    margin-top: 30rpx;
    display: flex;
    align-items: center;
    justify-content: space-between;

    image {
      flex: 1;
      height: 210rpx;

    }
  }

  .erweima {
    text-align: center;
    font-weight: bold;
    font-size: 30rpx;

    image {
      width: 90%;
      height: 90%;
    }
  }
}
/* 新版邀请好友弹窗 */
.getmaker_box{

  .getmaker_content{
    background: linear-gradient( 180deg, #FFE9E5 0%, #FFF1C3 99%);
    border-radius: 30rpx 30rpx 0 0;
    position: relative;
  }
  .getmaker_close{
    position: absolute;
    right: 20rpx;
    top: 20rpx;
    z-index: 10;
    width: 36rpx;
    height: 36rpx;
    padding: 10rpx;
    background: #FFFFFF;
    border-radius: 50%;
    text-align: center;
  }
  .getmaker_title{
    margin: 40rpx 0 20rpx;
    .title_img{
      width: 600rpx;
      height: 70rpx;
      margin: 0 auto;
    }
    .title{
      width: 600rpx;
      height: 70rpx;
      margin: 0 auto;
      position: relative;
      .title_text{
        font-size: 28rpx;
        color: #FFFFFF;
        line-height: 80rpx;
        text-align: center;
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        z-index: 1;
      }
    }
  }
  .getmaker_steps{
    height: 60rpx;
    background: rgba(255,255,255,0.8);
    border-radius: 16rpx;
    padding: 20rpx;
    display: flex;
    align-items: center;
    margin: 0 20rpx 20rpx;
    .steps_item{
      font-size: 24rpx;
      .steps_item_title{
        display: flex;
        align-items: center;
        font-weight: bold;
        color: #3D3D3D;
        padding-bottom: 8rpx;
      }
      .steps_item_text{
        color: #666666;
        text-align: center;
      }
    }
    .steps_jiantou{
      width: 44rpx;
      margin: 0 20rpx;
    }
  }
  .getmaker_img_box{
    margin: 0 20rpx 10rpx;
    display: flex;
    .getmaker_img_item{
      width: 50%;
      padding-right: 20rpx;
      position: relative;
      .check_icon{
        position: absolute;
        top: 10rpx;
        right: 30rpx;
        z-index: 1;
      }
      .getmaker_img_text{
        font-size: 24rpx;
        color: #3D3D3D;
        position: absolute;
        bottom: 20rpx;
        left: 20rpx;
      }
      .mp_erweima{
        width: 120rpx;
        height: 120rpx;
        border-radius: 50%;
        border: 2rpx solid #FFE8DC;
        padding: 10rpx;
        position: absolute;
        right: 30rpx;
        bottom: 50rpx;
        background: #FFFFFF;
      }
    }
    .getmaker_img_item:last-child{
      padding-right: 0;
      .check_icon{
        right: 10rpx;
      }
      .mp_erweima{
        right: 10rpx;
      }
    }
  }
  .getmaker_Invitation_code{
    height: 80rpx;
    display: flex;
    align-items: center;
    background: rgba(255,255,255,0.8);
    margin: 0 20rpx 20rpx;
    padding: 20rpx;
    border-radius: 16rpx;
    .invitation_code_left{
      width: calc(100% - 120rpx);
      height: 100%;
      .Invitation_code{
        font-size: 28rpx;
        color: #3D3D3D;
        padding-bottom: 16rpx;
      }
      .Invitation_code_text{
        color: #FF6A20;
        font-size: 24rpx;
      }
    }
    .invitation_code_right{
      width: 120rpx;
      height: 52rpx;
      line-height: 52rpx;
      text-align: center;
      font-size: 26rpx;
      color: #FF6A20;
      border-radius: 8rpx;
      border: 2rpx solid #FF9E5F;
    }
  }
  .getmaker_foot{
    border-radius: 30rpx 30rpx 0 0;
    background: #FFFFFF;
    padding: 30rpx;
    .getmaker_foot_title{
      display: flex;
      justify-content: space-between;
      .getmaker_foot_title_text{
        font-size: 28rpx;
        color: #3D3D3D;
      }
      .getmaker_foot_title_right{
        font-size: 24rpx;
        color: #888888;
        display: flex;
        align-items: center;
      }
    }
    .getmaker_foot_content{
      height: 150rpx;
      .uni-swiper-tab{
        white-space: nowrap;
      }
      .getmaker_foot_content_item{
        width: 120rpx;
        height: 130rpx;
        padding-top: 50rpx;
        padding-right: 20rpx;
        display: inline-block;
        text-align: center;
        .getmaker_foot_content_item_text{
          font-size: 24rpx;
          color: #333333;
        }
        .getmaker_foot_content_item_tip{
          position: absolute;
          left: 40%;
          top: -20rpx;
          z-index: 10;
          font-size: 20rpx;
          padding: 4rpx 8rpx;
          border-radius: 30rpx;
          border-width: 2rpx;
          border-style: solid;
        }
        .complete1 {
          line-height: inherit;
          text-align: center;
          background: none;
          border: none;
          margin-bottom: -10rpx;
          padding: 0;
        }
        .complete1:after{
          height: 100%;
          background: none;
          border: none;
        }
      }
    }
  }
}
/* 微信H5分享提示图片css */
.share_box_shadow {
  width: 100%;
  height: 100%;
  position: fixed;
  left: 0;
  top: 0;
  z-index: 99999;
  background-color: rgba(0, 0, 0, 0.6);
}
.share_box_shadow image {
  max-width: 80%;
  margin: 10%;
}
/* 绑定团员弹窗 */
.bind_maker_box{
  padding: 30rpx;
  .bind_maker_title{
    display: flex;
    justify-content: space-between;
    position: relative;
    .bind_maker_title_text{
      font-size: 32rpx;
      color: #3D3D3D;
      line-height: 80rpx;
    }
    .close{
      width: 36rpx;
      height: 36rpx;
      padding: 16rpx;
      background: #EEEEEE;
      border-radius: 50%;
      position: absolute;
      right: 0;
      top: -10rpx;
    }
  }
  .bind_maker_content{
    .bind_maker_item{
      margin-bottom: 20rpx;
      .bind_maker_item_title{
        width: 120rpx;
        height: 44rpx;
        line-height: 44rpx;
        font-size: 28rpx;
        text-align: center;
        background: linear-gradient( 270deg, #FEBB5B 0%, #FC754A 100%);
        color: #FFFFFF;
        transform: skew(-16deg); /* 调整倾斜角度 */
        border-radius: 8rpx; /* 添加圆角 */
      }
      .bind_maker_item_text{
        font-size: 28rpx;
        color: #3D3D3D;
        line-height: 48rpx;
        padding: 10rpx 0;
      }

    }
  }
  .bind_maker_btn{
    width: 100%;
    height: 80rpx;
    line-height: 80rpx;
    text-align: center;
    font-size: 32rpx;
    border-radius: 40rpx;
    color: #FFFFFF;
    background: linear-gradient( 270deg, #FDA255 0%, #FC754A 65%, #FC754A 100%);
  }
}
/* 复制邀请码弹窗 */
.maker_copy_box{
  width: 100%;
  height: 100%;
  .close{
    width: 100%;
    height:120rpx;
    display: flex;
    justify-content: flex-end;
    .close_icon{
      width: 36rpx;
      height: 36rpx;
      padding: 18rpx;
      background: rgba(255,255,255,0.1);
      border-radius: 50%;
      border: 2rpx solid rgba(255,255,255,0.3);
    }
  }
  .maker_copy_content{
    position: relative;
    .maker_copy_bg{
      width: 100%;
      height: 100%;
    }
    .maker_copy_warp{
      position: absolute;
      top: 0;
      left: 0;
      z-index: 1;
      padding: 40rpx;
      .title{
        font-size: 36rpx;
        color: #222222;
        height: 50rpx;
        margin: 30rpx 0;
        line-height: 50rpx;
        text-align: center;
      }
      .sub_title{
        font-size: 28rpx;
        color: #333333;
        line-height: 50rpx;
        text-align: center;
        margin-bottom: 50rpx;
      }
      .maker_copy_item{
        width: 33.33%;
        height: 150rpx;
        display: inline-block;
        text-align: center;
        .getmaker_foot_content_item_text{
          font-size: 24rpx;
          color: #333333;
        }
        .complete1 {
          line-height: inherit;
          text-align: center;
          background: none;
          border: none;
          margin-bottom: -10rpx;
          padding: 0;
        }
        .complete1:after{
          height: 100%;
          background: none;
          border: none;
        }
        .maker_copy_item_text{
          width:60rpx;
          height: 32rpx;
          line-height:32rpx;
          position: absolute;
          top: -20rpx;
          left: 45%;
          z-index: 1;
          font-size: 20rpx;
          text-align: center;
          border: 2rpx solid #FFFFFF;
          border-radius: 30rpx;
          color:#FFFFFF;
          background: linear-gradient( 89deg, #FF3E4F 0%, #FF9E5F 100%);
        }
      }
    }
  }
}
</style>
